React-bootstrap-typeahead: 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)
• [x] 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]

• [x] 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.

[frankverhorst]

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)