Skip to content

[Bug]: Special characters in Combo Box #17212

@orkrichli

Description

@orkrichli

Package

@carbon/react

Browser

Chrome, Firefox

Package version

v1.51.0

React version

v18.2.0

Description

when I put special characters in a combo box (in my case ≠, ≤, etc..) and I open the combo box - other components are "flashing". It only happens in the first time the combo box is opened and after a hard refresh.

It might be related to the ibm-plex font since we have a css block that sets it:
body { font-family: "IBM Plex Sans" !important; }

and when I disabled it the issue seems to be gone.
I didn't check other components and other browsers other than FF and Chrome.

Reproduction/example

https://stackblitz.com/edit/github-bmgxxb-oe1uog?file=src%2FApp.jsx

Steps to reproduce

Create a combo box component with special characters such as ≠, ≤, etc, add another carbon component (for example slider) and open the combo box.
You will see the other components flashing.
Link to screen recording showing it: https://ibm-security.slack.com/archives/C2K6RFJ1G/p1724051732422649

Suggested Severity

None

Application/PAL

No response

Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    Status

    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions