Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
zhouhua opened this issue Feb 6, 2024 · 12 comments · May be fixed by #5860 or #5972
Open

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

zhouhua opened this issue Feb 6, 2024 · 12 comments · May be fixed by #5860 or #5972
Labels
issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet

Comments

@zhouhua
Copy link

zhouhua commented Feb 6, 2024

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:

'aria-activedescendant': this.isAppleDevice

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

@zhouhua zhouhua added the issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet label Feb 6, 2024
@zhouhua zhouhua linked a pull request Feb 6, 2024 that will close this issue
@mefik1337
Copy link

any fix for now?

@zhouhua
Copy link
Author

zhouhua commented Feb 15, 2024

any fix for now?

#5860

waiting for code review

@codingwithchris
Copy link

codingwithchris commented Apr 10, 2024

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?

Screenshot 2024-04-10 at 1 01 43 PM

@hannupekka
Copy link

Same issue here.

@SaveliiLukash
Copy link

Very much reproducible and annoying.

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

@alfonsoluis
Copy link

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

@gorchov
Copy link

gorchov commented Sep 16, 2024

just got stung by this.

@michelecocuccio
Copy link

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

@stychu
Copy link

stychu commented Nov 4, 2024

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

same heere

@rc-markzhou
Copy link

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

Same, here is the error message I've got

image

@brendanmorrell
Copy link

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
Copy link

PR here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet
Projects
None yet