React Select v2.4.4 is unstyled and displaying aria message text

I am using react-select v2.4.4 for a dropdown list in a react v15.6.2 project with material-ui. However, the react-select component is displaying some unnecessary details whose source I am unable to find. This image shows the components used in my code. Row 3 with title IAE is the react-select component. When I click on the dropdown arrow, this is what is being displayed. This description is nowhere present in the code. On trying to click/select on the description, it reverts to the first image. Can someone guide me as to what could be causing this issue? Is it a known issue or a one-off case that I am facing and how can I resolve it. I have pasted the react-select part of the code below.

const options = [ { value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry' }, { value: 'vanilla', label: 'Vanilla' }, ]

<Select options={options} placeholder={'Enter Value'} isSearchable={true} />

PS. I cannot upgrade the react-select version since this is the latest my project is able to support.

[tjg37]

I was also experiencing the same issue using a CRA application. When running locally there is no issue, but when I build and deploy using CSR the Select components are “unstyled” and display aria message text as described by @marcopaivaa and @NikhilAnand95.

I’m using the following packages:

• react: 16.8.6
• react-select: 3.2.0
• @emotion/react: 11.1.1
• @emotion/styled: 11.0.0

The Select component is used in multiple components (Components A). There is one component that contains both the Select component and an @emotion/styled component (Component B). Upon initial observation the Select appears to be intermittently “unstyled”, however upon further inspection it would appear that @emotion/styled is overwriting the styles for the Select component.

Scenario 1

1. Navigate first to Component B and the Select is styled correctly.
2. Navigate to any Component A and the Select is still styled correctly.
3. Navigate to either Component A or B and the Select is still styled correctly.

Scenario 2

1. Navigate first to Component A and the Select is styled correctly.
2. Navigate to Component B and the Select is “unstyled” and aria message text displayed.
3. Navigate back to Component A and the Select is “unstyled” and aria message text displayed.

Scenario 3

1. Navigate first to any Component A and the Select is styled correctly.
2. Navigate to any Component A without navigating to Component B and the Select is still styled correctly.

It would appear that @emotion/styled is overriding the styles for the Select component if the @emotion/styled component is rendered after the Select component is first rendered as suggested by @ebonow.

To fix the issue I replaced @emotion/styled with the styled-components package and there were no longer any conflicts between the packages.

[marcopaivaa]

Greetings @ebonow!

So, I tried some of the methods reported in #3309, but I was unsuccessful … However, I realized that the scenarios described by @tjg37 are the same as mine … So we removed the emotion from ours components and, at least for now, there was no more css conflict with emotion in react-select lib… We made these adjustments yesterday, so it’s still being tested to confirm if the problem has been solved.