Skip to content

5118 down arrow to select elements #5126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

panacotar
Copy link
Contributor

Resolves #5118

Description

There are two types of select elements here:

  • f.input (collections)
  • select2 JS

For the first one, the majority of the inputs are wrapped in input-group. So I decided to extend the form-select class for those. This applies to all select elements wrapped in input-group.
I tried to handle it in the config file > input_group. But without success, adding form-select class here will add it to all inputs, I couldn't find a way to add it only to the select tags.

For select2 JS, I appended the form-select class in the select2 controller during the component initialization.

Type of change

  • Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Screenshots

  • The form in the issue - /manage/edit

5118

  • The New Product Drive form, under /product_drives/new

5118-1

@cielf cielf self-requested a review March 31, 2025 14:04
cielf
cielf previously requested changes Mar 31, 2025
Copy link
Collaborator

@cielf cielf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @panacotar -- thanks for taking this on.

Alas, your solution has side effects -- we end up with doubled arrows. See below (this is on the distributions, but the same would occur anywhere we have items, at least, which is most of the forms in the system)

Screenshot 2025-03-31 at 10 04 21 AM

@dorner -- do you have insight on our best approach here? -- I like the idea of having all the drop-downs have the same mechanism, but I don't know if there are other considerations.

@panacotar
Copy link
Contributor Author

Hey @panacotar -- thanks for taking this on.

Alas, your solution has side effects -- we end up with doubled arrows. See below (this is on the distributions, but the same would occur anywhere we have items, at least, which is most of the forms in the system)
...

@dorner -- do you have insight on our best approach here? -- I like the idea of having all the drop-downs have the same mechanism, but I don't know if there are other considerations.

You are right, I missed that.
I updated it by removing the form-select class from select2 JS elements. Some inputs were still missing the arrow (those wrapped in form-group), so I added that CSS rule as

On the issue, the Partner Profile Sections input is a select2 multi-box. I noticed that it is meant for multi-box selects to be without the arrow, you can see in the official documentation:
https://select2.org/getting-started/basic-usage#multi-select-boxes-pillbox

We can still add an arrow to it using CSS. Here is an example how:
https://stackoverflow.com/a/46363785/13257655

@cielf cielf dismissed their stale review April 3, 2025 23:58

CL has confirmed that this is ok, functionally, but we potentially have more to do.

@cielf
Copy link
Collaborator

cielf commented Apr 3, 2025

Hey @pancotar -- I did a pass through the app to check everything, and I noticed a couple of other instances. -- specifically that when you do a new 'quantity' request on behalf of a partner, neither the drop-down for selecting the partner nor the drop-down for selecting the item have down arrows. I think this is pre-existing, and it's technically out of scope of what was asked for --- would you like to add it in, or should we make up a new issue for it (to see what I mean: sign in as org_Admin1@example.com, select "requests" then "New Quantity Request".

@panacotar
Copy link
Contributor Author

Hey @pancotar -- I did a pass through the app to check everything, and I noticed a couple of other instances. -- specifically that when you do a new 'quantity' request on behalf of a partner, neither the drop-down for selecting the partner nor the drop-down for selecting the item have down arrows. I think this is pre-existing, and it's technically out of scope of what was asked for --- would you like to add it in, or should we make up a new issue for it (to see what I mean: sign in as org_Admin1@example.com, select "requests" then "New Quantity Request".

I will add these fixes as well. The original 5118 issue asked for all dropdowns to be fixed, so it falls under this.
Yes, it is pre-existing, I went back through commits to detect where it was introduced. It seems it has been like this for a while.
Pushing my fixes soon.

@panacotar
Copy link
Contributor Author

I added the missing arrow to 3 more selects:

  • new request modal
  • item select at /partners/individuals_requests/new
  • item select at /partners/requests/new

@cielf
Copy link
Collaborator

cielf commented Apr 5, 2025

LGTM -- over to @dorner for any technical concerns.

@cielf cielf requested a review from dorner April 5, 2025 19:13
@dorner dorner merged commit d48ddd2 into rubyforgood:main Apr 8, 2025
11 checks passed
Copy link
Contributor

@panacotar: Your PR 5118 down arrow to select elements is part of today's Human Essentials production release: 2025.04.20.
Thank you very much for your contribution!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG]: Select elements are missing down arrow
3 participants