clearButton and isValid Indicators Occupies Same Space

[SonicMagna]

Version:

react-bootstrap-typeahead: 5.2.0

Steps to reproduce:

A default installation using basic features and clearButton in conjunction with isValid/isInvalid (from here on I will only refer to isValid).
Use clearButton in conjunction with isValid.
Select an item from the list that will trigger both Clear and Valid.

  <Typeahead
      id="basic-example"
      onChange={setSelected}
      options={options}
      placeholder="Choose a state..."
      selected={selected}
      isValid={true}
      clearButton
    />

Expected Behavior

Visual separation of the clearButton and isValid indicators.

Actual Behavior

The indicators will be visually on top of each other; in the same space at the right end of the input field.
I was able to replicate this in https://codesandbox.io/s/9jq9jyzmry simply by adding:

      isValid={true}
      clearButton

and selecting something from the list.
In my project I am attempting to change CSS stuff around to get it looking correct, but figured I would let you know of the out-of-box behavior.
Thanks for the effort! :)

[ericgio]

Hi @SonicMagna, thanks for filing this issue! I can indeed reproduce the problem. I'll need to think about an appropriate solution.

[chneau]

HI @SonicMagna , I'm using this as a workaround:

.rbt.has-aux .form-control.is-valid,
.rbt.has-aux .form-control.is-invalid {
  background-position: right 1.6rem center;
}

Which makes it look like this

and css is the same for normal controls without the "x"

[ericgio]

Fixed in v6.0.0-alpha.4