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 [Suggestion] add a variables file, allow modifying the variables used in the scss files #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 Styling is missing Disabled options  #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! 👍

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! ☺️
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! ❤️ 👌
Hope there will be an official release soon ...

[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

[NordicAT]

@tagliala
I am sorry ✌️ - this was a mistake when adding the resources to the JSFiddle.
Here is the updated one with 4.6 CSS & JS: https://jsfiddle.net/5we3zL0t/

[tagliala]

I've got the issue, but I don't know if 100% should be forced in the CSS

Please add width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style', to the initializer

Ref: https://github.com/ttskch/select2-bootstrap4-theme/blob/master/docs/script.js#L5

[NordicAT]

@tagliala
Working fine - Thank you very much! 👌

I have just realized that this may not be an issue for the end-user, because on page load it is displayed OK.

[Rikijs]

@tagliala Could you please assess what is stil missing to finish this pull request?

[tagliala]

@Rikijs since this is not backward compatible, it needs another branch on this repo to push against

[manuelmeurer]

@tagliala @ttskch What else is needed to get this merged/released? Can I help in any way?

[dwasyl]

@tagliala Does this version still support 4.0.x as well, or only 4.1? (It does)

But, looking at the svg image used for the clear button, it seems to include a background image with an "X", whereas 4.0 includes an X in the text. Is there a reason for including the X in the svg (or how does one remove the default Select2 X)?