Hide validation icons from multiple selects

[tagliala]

Implementation provided in #33411 does not take into account that some
Operating Systems may display a vertical scrollbar in the multiple
select field

This implementation will hide the validation icons from multiple select
fields, just like Bootstrap 4 does.

Fix: #33591

Demo fiddles

BS4: https://jsfiddle.net/tagliala/y1t4cuqg/show
BS5: https://jsfiddle.net/tagliala/s45v1hLy/show

Before (Win 10 / Chrome 89)

Main

5.0.0.beta3

After (Win 10 / Chrome 89)

Bootstrap 4 vs Bootstrap 5

[tagliala]

Hi @tkrotoff this mimics BS4 approach, any chance to take a look at this PR?

[tkrotoff]

What about:

  select { <=====
    @include form-validation-state-selector($state) {
      &[multiple],
      &[size]:not([size="1"]) {
        padding-right: $form-select-padding-x;
        background-image: none;
      }
    }
  }

instead of

  .form-select {
    @include form-validation-state-selector($state) {
      &[multiple],
      &[size]:not([size="1"]) {
        padding-right: $form-select-padding-x;
        background-image: none;
      }
    }
  }

This way it fixes also your comment: #33411 (comment)

[mdo]

There should be no difference in moving from .form-select to select because we only have one class for this in v5. I’d stick with the class selector. I’m also good with moving in this direction to hide the icon again.

[tkrotoff]

I see several solutions depending on whether #33411 (comment) should be treated or not (is Bootstrap 5 supposed to work if the user writes select.form-control instead of .form-select?)

Modify scss/mixins/_forms.scss

• 1- solution proposed in this PR: .form-select { @include form-validation-state-selector ... }, doesn't solve Fix validation feedback icon in select multiple #33411 (comment)
• 2- the same code with select instead .form-select, solves Fix validation feedback icon in select multiple #33411 (comment)

Modifying _forms.scss has the drawback to have almost the same code inside _form-select.scss but the code can be factorized (something like remove-select-multiple-background-image())

Modify scss/forms/_form-select.scss

• 3- add !important here:

  bootstrap/scss/forms/_form-select.scss

  Lines 38 to 39 in a48a29a

  	padding-right: $form-select-padding-x;
  	background-image: none;

  , doesn't solve Fix validation feedback icon in select multiple #33411 (comment)
• 4- add

  select {
    &[multiple],
    &[size]:not([size="1"]) {
      padding-right: $form-select-padding-x !important;
      background-image: none !important;
    }
  }

  solves Fix validation feedback icon in select multiple #33411 (comment)

if we modify _form-select.scss this way, we don't need the same code inside _forms.scss

The problem with !important is that the user cannot set its own background-image to the select/.form-select.

I'm not a affiliated with Bootstrap, just my 2€

[tagliala]

given @ffoodd's comment at #33411 (comment), would it be a better solution to only apply style to .form-select without multiple or with [size="1"]? Is there an edge case that I'm missing?

      @if $enable-validation-icons {
        &:not([multiple]),
        &[size="1"] {
          padding-right: $form-select-feedback-icon-padding-end;
          background-image: escape-svg($form-select-indicator), escape-svg($icon);
          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
        }
      }

[tkrotoff]

@tagliala I've tested &:not([multiple]), &[size="1"] (nicer approach than my suggestions!) => does not work in all cases:

This works (but does not solve #33411 (comment)):

  .form-select {
      ...

      @if $enable-validation-icons {
        &:not([multiple]):not([size]),
        &[size="1"] {
          padding-right: $form-select-feedback-icon-padding-end;
          background-image: escape-svg($form-select-indicator), escape-svg($icon);
          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
        }
      }

      ...
    }

Code to test:

<h2>select form-control (supported by Bootstrap 4, should it be supported by Bootstrap 5?)</h2>

<div class="mb-3">
  <select class="form-control is-valid">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

<h2>form-select</h2>

<div class="mb-3">
  <select class="form-select is-valid">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

<h2>form-select multiple</h2>

<div class="mb-3">
  <select class="form-select is-valid" multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

<h2>form-select size="1"</h2>

<div class="mb-3">
  <select class="form-select is-valid" size="1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

<h2>form-select size="2"</h2>

<div class="mb-3">
  <select class="form-select is-valid" size="2">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

Screenshot with untouched v5 beta3:

btw you will notice that Bootstrap does not respect size="2" (it displays a bit more than 2 lines), screenshot with regular select size="2":

[tagliala]

Thanks, of course I was missing something

btw, &:not([multiple]):not([size]), &[size="1"] { does not cover multiple size="1"

          <form>
            <code>form-select</code>
            <div class="mb-3">
              <select class="form-select is-valid">
                <option>1</option>
                <option>2</option>
                <option>3</option>
              </select>
            </div>
            <code>form-select size="1"</code>
            <div class="mb-3">
              <select class="form-select is-valid" size="1">
                <option>1</option>
                <option>2</option>
                <option>3</option>
              </select>
            </div>
            <code>form-select size="2"</code>
            <div class="mb-3">
              <select class="form-select is-valid" size="2">
                <option>1</option>
                <option>2</option>
                <option>3</option>
              </select>
            </div>
            <code>form-select multiple</code>
            <div class="mb-3">
              <select class="form-select is-valid" multiple>
                <option>1</option>
                <option>2</option>
                <option>3</option>
              </select>
            </div>
            <code>form-select multiple size="1"</code>
            <div class="mb-3">
              <select class="form-select is-valid" multiple size="1">
                <option>1</option>
                <option>2</option>
                <option>3</option>
              </select>
            </div>
            <code>form-select multiple size="2"</code>
            <div class="mb-3">
              <select class="form-select is-valid" multiple size="2">
                <option>1</option>
                <option>2</option>
                <option>3</option>
              </select>
            </div>
          </form>

The correct inversion should be

&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {

Bootstrap 4 vs Bootstrap 5

[tkrotoff]

👍 You're right about multiple size="1": it displays a scrollbar and thus there should be no feedback icon and no indicator icon.

[mdo]

Wow, appreciate the effort in this PR! The selector specificity isn't my favorite, but it solves the problem well. I think we can ship this.

[ffoodd]

Agreed, thanks for the discussions and researches!