[Bug]: Special characters in Combo Box

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

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

carbon-design-system / carbon