Fix input-group reset border radius

[florianlacreuse]

Hi @angel-vladov,

I found an issue with the reset border radius rules.

In BS4, .form-control can be inside an .input-group without prepend or append elements. In this case the .form-control keeps its default borders radius.

With Select2 components, the right borders radius will be reset to 0, like this:

The current scss rules:

https://github.com/angel-vladov/select2-bootstrap-theme/blob/8de55f55e3db484b1213d488ea3b7f756187a3af/src/select2-bootstrap.scss#L810-L825

IMHO this could be rewrite as follows (easier and fix the issue):

.input-group > .select2-hidden-accessible {
  &:not(:first-child) + .select2-container--bootstrap > .selection > .select2-selection,
  &:not(:first-child) + .select2-container--bootstrap > .selection > .select2-selection.form-control {
     @include border-left-radius(0);
  }

  + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection,
  + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control {
    @include border-right-radius(0);
  }
}

[angel-vladov]

Thanks for catching that. Will push an update today

[angel-vladov]

There's a new release in npm. Version is changed to 0.2.0-beta.5 and includes your suggestion.

In addition, the examples page now has the new case as last row in its Input Groups section.

Thanks again for catching this

[florianlacreuse]

Thanks for your time and effort!

This BS theme is important for our applications, so I'll let you know if we find another issue in the future. Keep up the good work!

[florianlacreuse]

@angel-vladov I'm sorry, my bad, I forgot a comma when typing the rules for the left side in my first message...

Here is the missing comma in the current scss file:

https://github.com/angel-vladov/select2-bootstrap-theme/blob/1c29d9c45cfa9449ef4ebd56b4a79987b2a37adb/src/select2-bootstrap.scss#L811

[angel-vladov]

Good catch. I missed it as well. Published new version 0.2.0-beta.6 that has the missing comma