FromControl causes SSR/hydration error with incorrect id

[Swiftwork]

Describe the bug FromControl causes SSR and hydration error with incorrect id between server and client.

To Reproduce Steps to reproduce the behavior:

1. Create a next.js project
2. Add a basic FormControl
3. Observe SSR error in the console

Reproduction in code can be found here

Expected behavior FormControl should render the on the server as the client.

Screenshots

Warning: Prop id did not match. Server: "react-aria-1" Client: "react-aria-2"

Desktop (please complete the following information):

• OS: all
• Browser: all
• Version: 35.2.2

Smartphone (please complete the following information):

• Device: all
• OS: all
• Browser: all
• Version: 35.2.2

[siddharthkp]

Hello again!

Thanks for reporting this. I think this is because of our double rendered strategy for slots, we are tracking it here: https://github.com/primer/react/issues/1690

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[Swiftwork]

Not stale

[siddharthkp]

Not stale, related to https://github.com/primer/react/issues/1690

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[lesliecdubs]

Is it possible this has been since been resolved as part of https://github.com/primer/react/issues/1690? @siddharthkp could you please confirm?

[peterbe]

Still a bug. I'm using a simple NextJS v13 with https://primer.style/react/Autocomplete

All I did was:

export function Input() {
  return (
    <form>
      <FormControl>
        <FormControl.Label id="autocompleteLabel-basic">
          Pick a branch
        </FormControl.Label>
        <Autocomplete>
          <Autocomplete.Input />
          <Autocomplete.Overlay>
            <Autocomplete.Menu
              items={[
                { text: "main", id: "0" },
                { text: "autocomplete-tests", id: "1" },
                { text: "a11y-improvements", id: "2" },
                { text: "button-bug-fixes", id: "3" },
                { text: "radio-input-component", id: "4" },
                { text: "release-1.0.0", id: "5" },
                { text: "text-input-implementation", id: "6" },
                { text: "visual-design-tweaks", id: "7" },
              ]}
              selectedItemIds={[]}
              aria-labelledby="autocompleteLabel-basic"
            />
          </Autocomplete.Overlay>
        </Autocomplete>
      </FormControl>
    </form>
  )
}

I can, kinda, solve this by doing something like this:

const [isReady, setReady] = useState(false)
useEffect(() => {
  setReady(true)
}, [])

...

{isReady && <Autocomplete> ... </Autocomplete>}