Refactor as custom select + Select2 4.1 compatibility

[tagliala]

Close: #19, #49, #51, #60, #61

• Add compatibility with Select2 4.1
• Uses Bootstrap's custom-select implementation for uniformity
• Use SVG background image for clear button
• Add some lints to improve code readability
• Use the same Browserlist configuration as Bootstrap 4.6
• Add SCSS variables for easier customization #51
• Add support for feedback validation icons

Fixes the following existing issues:

• Missing input focus in single select dropdown
• Fix input color in single select dropdown
• Fix cursor pointer when hovering on search input in disabled select
• Fix disabled color #60

Waiting for the proper branch to pushing against

Please help me testing

Screenshots

[tagliala]

@tagliala I have tested your reimplementation. I like it, but there seems to be a bug with an empty multiselect. Have a look at the following screenshot:

[NordicAT]

@tagliala I just figured out the issue. I am sorry - It does not have anything to do with your code/css.

I had a custom-fix for an issue in my CSS, which is described here: Placeholder being cut off?

This is hopefully not necessary anymore. After removing this, the reported issue disappeared of course.

I am sorry and thank you for the support.

[tagliala]

Hi @NordicAT, don't worry, you're welcome.

Hi. I think this is a known issue since 2012 when select2 with multiselect is initialized inside a hidden element.

I can try how to replicate, but maybe this has been fixed upstream in select2 4.1

[NordicAT]

May it be the case, that the font-family of the placeholder-text differs from a Single-Select to a Multi-Select?

[tagliala]

I can confirm an issue with font-family. It is being stripped out from the dist css and I should fix a rule. I'm investigating

[tagliala]

@NordicAT fixed, thanks

[NordicAT]

I can confirm, that the font-family issue is fixed with the latest CSS - Thank you! :thumbsup:

I believe there is something wrong with Multi-Select.

The screenshot below shows a Multi-Select from the original Select2-docs:

Items that have been already selected have a grey background in the list.

First issue:

When looking on the same situation with your/our CSS for BS4 the background is way too light in my opinion. It may be, that my monitor has too less contrast, but I can hardly see a difference between selected and not selected items:

It must not be as dark as in the original Select2 CSS.

Second issue:

As in the screenshot above I see a light-grey background on selected items in the list. If I hoover over those items using the mouse-cursor, they lose their light-grey background. I have to reopen the list to bring it back.

I hope this issues are not in my environment only ...

[tagliala]

When looking on the same situation with your/our CSS for BS4 the background is way too light in my opinion

Agreed. Let me check how bootstrap deals with this. edit: I've just used ~10% darken background~ the disabled color bg

As in the screenshot above I see a light-grey background on selected items in the list.

Replicated. It is also an issue at https://ttskch.github.io/select2-bootstrap4-theme/

[tagliala]

@NordicAT fixed both

[NordicAT]

@tagliala Wow - Thank you very much! :relaxed: I can confirm that both issues are fixed.

Just a small cosmetic one:

When activating a Multi-Select by clicking on it, the select-box gets a blue outer-glow:

When activating a Single-Select by clicking on it, the select-box does not get a blue outer-glow.

It gets glowing after an item has been selected.

I may be wrong, but for me this does not seem consistent. Looking at the Bootstrap-Docs the Select is glowing when activating: https://getbootstrap.com/docs/4.6/components/forms/

[tagliala]

@NordicAT done.

I've added the focus style to the properly focused input element, as in the default Select2

[NordicAT]

I just use basic features of Select2 and for me it is working fine now. There is nothing to complain about.

Thank you very much for your effort! :heart: :ok_hand: Hope there will be an official release soon ...

[Rikijs]

Hi!

Thanks for updating Select2 Bootsrtap4 Theme!

Does updated (in development) select2-bootstrap4-theme theme is compatible with form validation with jQuery validation updated (Bootstrap v4.6 custom select) design?

I guess it should, but want to be on the safe side. (Did not see any examples in your screenshots).

Probably - with single select - it should be ok. Yet on multiple select close button may conflict with satus (valid/invalid field) icon.

[tagliala]

Does updated (in development) select2-bootstrap4-theme theme is compatible with form validation with jQuery validation updated (Bootstrap v4.6 custom select) design?

• Is the previous version of this theme compatible with that plugin?
• Is Select2 4.1 rc0 with the default theme compatible with that plugin?

If the answer is yes to both, could you please create a fiddle and check that this update didn't break things?

[Rikijs]

1

Is the previous version of this theme compatible with that plugin?

I think it is partly compatible (when validating border is green/red but no success/error icon is displayed)

2

Is Select2 4.1 rc0 with the default theme compatible with that plugin?

Sadly, i can not find info about support of jQuery validation with Select2 v4. Issues on GItHub with this keyword seem to be 5 years old and reference older version of Select2.

3 As this issue reads "Refactor as custom select + Select2 4.1 compatibility" i hope that changes to markup (based on Bootstrap v4.6 custom-select) allows to display icons indicating validations success/fail icons additionally to field border.

[tagliala]

As this issue reads "Refactor as custom select + Select2 4.1 compatibility" i hope that changes to markup (based on Bootstrap v4.6 custom-select) allows to display icons indicating validations success/fail icons additionally to field border.

I can fix this

[tagliala]

@Rikijs

with focus:

Will add custom variables and commit

[Rikijs]

Looks good! Perhaps, there should be a litte more spacing between field clear icon and validation status success/error icon.

[tagliala]

@Rikijs done

[Rikijs]

Great! Just a litle typo in updated image of different states. It is saying "Invalid example" 2 times.

[Rikijs]

Question: Is it currently posible to change color of all select2 borders in one go in one place? Default is too light for my current project and overriding seams to be planed in this isssue. Yet overriding in CSS (using 1.5.2 version) overrides success/error states. (I might be overriding not efficiently.) Variables file would be preferable solution.

[tagliala]

Question: Is it currently posible to change color of all select2 borders in one go in one place?

The only variable used for border color should be $select2-bootstrap4-border-color. Danger and Success are inherited from bootstrap

Yet overriding in CSS (using 1.5.2 version) overrides success/error states. (I might be overriding not efficiently.)

If you need to override via CSS, you should preserve the order of rules and css specificity

[tagliala]

I've fixed a couple of issues with validation focus and validation icons are now supported also in select multiple

[Rikijs]

I've fixed a couple of issues with validation focus and validation icons are now supported also in select multiple

That is great news!

[Rikijs]

@tagliala please share your estimate when release/tag could be made?

[tagliala]

This is not my repository, apologies

[yads]

I've been using your branch @tagliala and following this PR for changes. Appreciate the work! Have you considered publishing your changes to npm under @tagliala/select2-bootstrap4-theme?

[Rikijs]

I apologize for the negligence.

[NordicAT]

@tagliala

Hi, I was trying to create a Bootstrap Horizontal form with Select2 selects.
It looks like this:

There seems to be a problem in Smartphone-size:

I have created the following JSFiddle using a strapped-down sample-code to reproduce the issue: https://jsfiddle.net/612pmajt/3/

I am not sure about the problem-source. It may not be the fault of the select2-bootstrap4-theme. I can't exclude my own code. Could you please have a short look?

Thank you

[tagliala]

This theme does not support Bootstrap 5