5118 down arrow to select elements

[panacotar]

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

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

[cielf]

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.

[panacotar]

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

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

[cielf]

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]

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]

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]

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

[github-actions]

@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!