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 · 42 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 · 42 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

@johnyvelho
Copy link

no progress on this? 2 prs opened... let me know if I can help somehow

@underground0930
Copy link

Thank you for the wonderful library.
I apologize for taking up your time, but could you please merge the PR?

@kuchejak
Copy link

+1

1 similar comment
@Gherdty
Copy link

Gherdty commented Jan 3, 2025

+1

@ITerenti
Copy link

ITerenti commented Jan 7, 2025

+1 😢

@sagarguhe
Copy link

+1

@chelscodes
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

The errors related to the number changing in "react-select-#..." can be fixed by adding the instanceId prop.
You'll still be left with the aria-activedescendant error though. Just waiting on that PR to be merged... 👀

@vladshcherbin
Copy link

Holy cow, close to a year with the bug 😱

@semlakune
Copy link

+1

3 similar comments
@StefanFeser
Copy link

+1

@SetupCoding
Copy link

+1

@Jontzii
Copy link

Jontzii commented Jan 27, 2025

+1

@ElwynVdb
Copy link

+1

@edi
Copy link

edi commented Jan 31, 2025

Still an issue, a year later

@anhdd-kuro
Copy link

+1

2 similar comments
@AliceYuuuuuu
Copy link

+1

@nassmim
Copy link

nassmim commented Feb 10, 2025

+1

@benny-sit
Copy link

+1 ( Next.js )

@u2ix
Copy link

u2ix commented Feb 12, 2025

+1 🫣
Label for this bug should definitively be confirmed not unconfirmed by the many people confirmed this by now.

@edi
Copy link

edi commented Feb 12, 2025

+1 nextjs 15

@aycanogut
Copy link

The bug is still happening on Next.js 15.

@RazvanBalota
Copy link

+1

3 similar comments
@luk-str
Copy link

luk-str commented Feb 17, 2025

+1

@david-trujillo
Copy link

+1

@ibrkljacic
Copy link

+1

@TomasSestak
Copy link

here

@JedWatson can we please please please merge it?

@wirelessjeano
Copy link

+1

3 similar comments
@karelhojda
Copy link

+1

@JakubKontra
Copy link

+1

@bluetidepro
Copy link

+1

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