react-select v5.8.0: `Extra attributes from the server: aria-activedescendant`

[zhouhua]

When react-select is used in SSR, an error may occur during browser rendering: Extra attributes from the server: aria-activedescendant. This should be a hydration problem.

I think it's caused by this line of code:

react-select/packages/react-select/src/Select.tsx

Line 1724 in 06e3488

'aria-activedescendant': this.isAppleDevice

It may be written in a useEffect to avoid differences in browser and server environments.

[mefik1337]

any fix for now?

[zhouhua]

any fix for now?

#5860

waiting for code review

[runewolf7]

Same issue here. Any progress on getting #5860 reviewed and/or doing a fix that resolves this holistically without the need for consumers to set an additional prop?

[hannupekka]

Same issue here.

[SaveliiLukash]

Very much reproducible and annoying.

As far as we know from #5907 our only hope is @Methuselah96 🙏

[alfonsoluis]

Same issue here, that is one nasty warning for such a nested aria definition

[gorchov]

just got stung by this.

[michelecocuccio]

Any solution for this? I am having the same issue in my Next15 project

[stychu]

Any solution for this? I am having the same issue in my Next15 project

same heere

[rc-markzhou]

Any solution for this? I am having the same issue in my Next15 project

Same, here is the error message I've got

[brendanmorrell]

This is indeed a pretty annoying error. until it is fixed, you can patch the library. go to /dist/Select-1fd588c9.esm.js and add:
componentHasMounted: false, to this.state, this.setState((s) => ({ ...s, componentHasMounted: true })) to the top of componentDidMount and then change the aria-activedescrendent check to

 'aria-activedescendant':
                    this.state.componentHasMounted && this.isAppleDevice
                       ? undefined
                       : this.state.focusedOptionId || '',

[brendanmorrell]

PR here