Support Bootstrap 5

[ericgio]

Bootstrap 5 is currently in beta, so I'm creating this issue to track the changes this library will need to make to support the new version out of the box. Please comment if you come across anything not working.

• Update ClearButton classname to include btn-close (BS5 Close Button component)
• Rename sr-only classname to visually-hidden (Helpers)
• Support floating labels

As a general workaround, the typeahead's render props and child render function can be used to customize individual components in a way that better supports BS5.

[rkleine]

• Rename sr-only classname to visually-hidden. https://getbootstrap.com/docs/5.0/migration/#helpers

[dwaynelavon]

• Support floating labels

[filipkis]

Bootstrap 5 is now released. Any ETA on when support could be expected?

[belinde]

Not exactly sure it's a Bootstrap5 exclusive issue, but I'm using it with the 2.0.0-beta.2 react-bootstrap. Elements with class invalid-feedback are shown only if they're adjacent to an element with class is-invalid. The Typeahead component has the Input element with the correct class, but it's wrapped in two div's, so the standard CSS from Bootstrap doesn't show the error messages. Putting the is-invalid class in the outermost div resolves the issue.

[ericgio]

Support for visually-hidden classname added in v5.2.0.

@filipkis: I don't have a timeline on when full, out of the box support will happen. I'll try to add things incrementally, but the close button and floating label changes are both non-trivial.

[frankv12]

BS 5.0.2 | RBT 5.2.0 | Remove button styling is missing: https://prnt.sc/1d683mt @ericgio

[fkrauthan]

Any ETA for this? On initial testing it seems like the loading indicator shows text+the spinning animation and the close/delete button seem to be missing (as it shows text only too)

[geoffbarcalow]

Multiselect close buttons not rendering correctly.

[rcugut]

There's been quite a change between BS4 and BS5 in regard how the "close" icon/button is implemented.

In BS4, it was using a <span> with the html character "times" inside a <button>:

<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

And in BS5, this changed to just using a <button> (which uses a SVG background for rendering the actual "X" icon):

<button type="button" class="btn-close" aria-label="Close"></button>

And it looks like the current v5.2.0 lib code is still generating the underlying component code to be compatible to BS4, which includes the child <span>:
https://github.com/ericgio/react-bootstrap-typeahead/blob/v5.2.0/src/components/ClearButton.js#L71

However, I solved this in our project, where we use BS5, by adding this SCSS snippet. It's overwriting a the .rbt-close class.

// somewhere you import bootstrap and react-bootstrap-typeahead
@import "~bootstrap/scss/bootstrap";
@import "~react-bootstrap-typeahead/css/Typeahead";


// the class override "hack" for BS5

.rbt-aux {
    & .rbt-close {
        margin-top: unset;
        @extend .btn-close; // inherit all the properties of the bootstrap class `.btn-close`
        pointer-events: auto; /* Override pointer-events: none; above */
        span {
            display: none;  // hide the BS4 compatible span element
        }
    }
}

I didn't have enough time to think of an elegant and simple solution from the library code point of view, to keep both BS4 and BS5 compatibility.
My conclusion was that the library must be made aware of which Bootstrap version is using.

[ericgio]

My conclusion was that the library must be made aware of which Bootstrap version is using.

That sounds right. When BS4 came out I added a separate CSS file with BS4 overrides that consumers of the library needed to import as well as the main file. This is most likely the approach I'll need to take for BS5 as well.

The switch to using a background image for the close button is pretty unfortunate from a flexibility point of view, since it makes it much more difficult to customize, eg: applying a different color.

Still no set timeline for complete out of the box support, but I'd like to include it with v6.0, currently in alpha.

[waltervi]

Multiselect close buttons not rendering correctly.

I'm having the same issue

[Jorl17]

In case someone wants an alternative solution to the SCSS fix, I believe this fix works in plain CSS:

.rbt-token .rbt-token-remove-button {
  margin-right: -10px;
}

.rbt-input-wrapper div:nth-child(n+2) {
  padding-left: 10px;
}

It's far from good, but it does the job for my use case. We basically pad the button 10px to the right and adjust everything (cursor position, etc) accordingly -- but only if there is more than one item actually present in the div.