ClearButton in react-bootstrap-typeahead with 2 X superimposed

Question

I have a graphical bug with the ClearButton provided by react-bootstrap-typeahead. I wanted to replace it with another button (for instance the CloseButton from Bootstrap). Unfortunately, the CloseButton is not clickable.

Graphical bug

What do I do wrong ?

import { CloseButton } from "react-bootstrap";
import { Typeahead, ClearButton } from "react-bootstrap-typeahead";
import "bootstrap/dist/css/bootstrap.min.css";
import "react-bootstrap-typeahead/css/Typeahead.css";
<Typeahead
      id="search"
      options={chartData.datasets}
      labelKey={chartData.datasets.label}
      placeholder="look for projects"
      multiple
      onChange={setMultiSelections}
      selected={multiSelections}
    >
      {({ onClear, selected }) => (
        <div className="rbt-aux">
          {!!selected.length && <CloseButton onClick={onClear} />}
        </div>
      )}
</Typeahead>

• try to change rbt-close-content css class
• I used react-bootstrap-typeahead/css/Typeahead.bs5.css instead.

Answer 1

It seems like there may be two different issues here:

1. The clear button isn't clickable.

This is happening because .rbt-aux has pointer-events: none; set to avoid blocking clicks on the input. The default close button then has pointer-events: auto; to enable clicks on the button. You'll need to add something similar, or define your own element to position the clear button that doesn't remove pointer-events.

.rbt-aux .btn-close {
  pointer-events: auto;
}

2. There are two instances of the clear button being rendered in the component.

I'm not sure why this is happening. Based on your code sample, there should only be one button rendering. If you plan on rendering a custom clear button, be sure not to set the clearButton prop on the typeahead (or set it to false, which is the default).