#3719 Remove bootstrap-select and replace with select2

[kristenking]

Changes Made:

• Replaced bootstrap-select with select2 in the organization edit page.
• Removed the bootstrap-select gem from the Gemfile.
• Updated connected spec test

Screenshots:

Organization Edit Page with bootstrap-select:

Organization Edit Page with select2:

Tests:
Performed tests manually on the client side
Ran organization_system_spec.rb successfuly
Ran all rspec tests sucessfully

Notes and Questions:
I still need to improve UI in changed code. Should I add styles to the custom-select class or create a separate one for this dropdown? Alternatively, are there any out-of-the-box solutions that would work well here?

As it is the first time I work with this codebase, just wanted to ensure if I'm heading in the right direction. If there's a different approach that would be more suitable for this issue, please let me know, and I'll address it promptly.

Thank you a lot for your review!

[dorner]

It's definitely the right approach! I'm pretty sure we use select2 with multi-select successfully on other pages, so maybe check one of those to see how it's done? The UI definitely doesn't look great in that screenshot.

[kristenking]

What I've Tried:

• Added custom CSS in application.scss to override the default Select2 styles.
• Played around with the inline styles directly in the Developer Tools.
• Looked into our existing codebase to find any references to the usage of Select2 "multiple", but couldn't find any.

Problems Encountered:

• The items chosen in the dropdown have a weird blue background and the delete ('x') icon overlaps with the text.
• My custom styles are not reflecting any changes.

Request for Help:

I feel like I've hit a blocker and could use some additional perspectives on this issue. If anyone has experience styling Select2 dropdowns, your input would be greatly appreciated. Would love to pair up to solve this quicker if anyone is available.

[dorner]

I added these to application.scss and it seems to look a lot better:

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  padding-left: 28px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 0;
  width: 20px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background-color: #8282df
}

[kristenking]

Thank you so much for your help @dorner ! My problem was silly but I am glad I found the issue: I was adding styling to application.scss under javascript folder not assets. This is how it looks now after adding styling:

[dorner]

Nice, looks good! Thanks!