[Bug]: NavDrawer: Cannot change the value if the initial value is undefined.

[kkamik]

Library

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

System Info

https://stackblitz.com/edit/f2xpac?file=src%2Fexample.tsx

Are you reporting an Accessibility issue?

None

Reproduction

https://stackblitz.com/edit/f2xpac?file=src%2Fexample.tsx

Bug Description

screen-capture.1.webm

Actual Behavior

Cannot change "selectedValue" and "selectedCategoryValue" if the initial value is undefined.

Expected Behavior

Can change "selectedValue" and "selectedCategoryValue" if the initial value is undefined.

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

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.

[mainframev]

hi @kkamik 👋🏻

It happens because you are changing the value from undefined to defined, the component has a check for controlled/uncontrolled behaviour. If you will open the console you will see the warning:

@fluentui/react-utilities [useControllableState]: A component is changing an uncontrolled value to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

So in your case, you will have to set the default state value to some category, value different from undefined will work