[Bug]: Incorrect red border on invalid inline filterable multiselect

[ccwilson-us-ibm-com]

Package

@carbon/react, @carbon/styles

Browser

Chrome, Firefox

Package version

v1.8.0

React version

^17.0.0

Description

When setting the invalid state on an inline filterable multiselect component, two overlapping red borders are rendered. This occurs when at least one option is selected and the dropdown listbox is closed. I believe there should only be a single border.

Reproduction/example

https://stackblitz.com/edit/github-yxfgii?file=src/App.jsx

Steps to reproduce

Here's how the component is configure to display this issue:

<FilterableMultiSelect
          ariaLabel="Filterable MultiSelect"
          id="filterable-multiselect-example"
          items={items}
          label="Filterable multiselect options"
          titleText="Filterable multiselect title"
          type="inline"
          invalid="true"
        />

And then select at least on option in the component.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[ccwilson-us-ibm-com]

Screen shot for reference:

[tay1orjones]

Thanks for the report @ccwilson-us-ibm-com, you're right the intent is for only a single red outline to be present. We'll work on a fix.