React 18 useId() conflict with jQuery

[quantizor]

Current behavior

When trying to interact with an element rendered by React that has htmlFor set to an ID returned by the useId() hook, the peculiar syntax React uses for IDs in React 18 actually causes an error:

Timed out retrying after 4000ms: Syntax error, unrecognized expression: #react-aria2038921877-:r0:

Note the :r0: portion (I know it says react-aria but under the hood it's using R18's useId API).

We don't want to escape htmlFor because that breaks platform functionality, jQuery should just handle/ignore it.

Interestingly the selector used in Cypress didn't even target that attribute:

cy.get('[data-subcomponent="file-picker-dropzone"]').selectFile('something.pdf')

Desired behavior

No response

Test code to reproduce

Example React code:

import * as React from 'react';

const Component = () => {
  const id = React.useId();

  return (
    <div>
      <label htmlFor={id}>Label</label>
      <input id={id} type="file" />
    </div>
  );
}

Then example Cypress test code:

cy.get('label').selectFile('something.pdf')

Cypress Version

12.17.4

Node version

20

Operating System

macOS latest

Debug Logs

No response

Other

No response

[Marco-Daniel]

I'm running into the same issue when using useId in my forms, any update on this?

[AriPerkkio]

I have similar issues with custom query that gets elements based on another element's aria-describedby attributes. IDs in those fields are populated using React.useId().

As work-around I had to refactor the selector a bit:

const id = subject.attr('aria-describedby'); // e.g. ":r3:-error"

- return cy.get(`#${id}-error`); // Fails with "unrecognized expression: #:r3:-error"
+ return cy.get(`[id="${id}-error"]`); // Works, generates selector '[id=":r3:-error"]' which works fine