Warning: Prop `aria-describedby` did not match. Server: "popup-212" Client: "popup-1"

[tabzam]

why would this error appear. it was working fine and then suddenly this started appearing. the aria-describedby="popup-212" changes everytime i refresh.

Version

Test Case

Expected Behavior

Actual Behavior

[datsfilipe]

I'm having the same error, don't know why.

[datsfilipe]

if someone is facing the same problem, the solution for me was to follow what was said in #215

[Kingkon963]

This situation is similar to this issue and the reason is also described there.

Here this line is causing the issue

[Bug-Reaper]

Same issue, workarounds that involve id="unique-anything" and isLazy don't help.

[vhpoet]

Starting with React 18 you can fix this by replacing ++popupIdCounter with useId() in here.

Context on useId(): https://reactjs.org/docs/hooks-reference.html#useid

[lukacspapp]

https://github.com/yjose/reactjs-popup/issues/215#issuecomment-1332724293

[nesterow]

As a temp fix, you could use a wrapper in order to clean up aria-describedby. Until someone sends a pr with fix for this issue.

const TriggerWrapper = React.forwardRef((props, ref) => {
  return React.cloneElement(props.children, {
    ref,
    onMouseEnter: props.onMouseEnter,
    onMouseLeave: props.onMouseLeave,
    'aria-describedby': '0'
  });
});