[Bug]: Field overwrites id of wrapped control

[adamsamec]

Library

React Components / v9 (@fluentui/react-components)

System Info

N/A

Are you reporting Accessibility issue?

no

Reproduction

Yet to be provided

Bug Description

Actual Behavior

When a v9 Field component is used to wrap an inner native HTML control or v9 control like Input or Checkbox, and an "id" attribute is set on that inner control, the "id" gets overwritten with a generated "id".

Expected Behavior

The "id" attribute of the inner control should be preserved when wrapped by the Field component.

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[behowell]

Thanks for the bug report @adamsamec. Could you provide a repro?

I'm not able to repro this on a simple example. E.g. Field respects the id my-input in this example:
https://codesandbox.io/s/gracious-violet-82imsd?file=/example.tsx

<Field label="Example">
  <Input id="my-input" />
</Field>

[behowell]

It turns out this was related to using a react-hook-form Controller inside the Field. While it's possible to make this work, Field's API could be improved to work better with form validation libraries.

Repro: https://codesandbox.io/s/happy-butterfly-c7pcmr?file=/example.tsx