Correct way to represpen close state of controlled Navigation Menu

[QzCurious]

Sample code

Not work

The type for value of NavigationMenu.Root is value?: string. So it is valid:

const [openingMenu, setOpeningMenu] = React.useState<string>()
    // ^ string | undefined
return <NavigationMenu.Root
  value={openingMenu}
  onValueChange={setOpeningMenu}
/>

But since it is controlled, for react, value should not be undefined. It also makes it unclear what should NavigationMenu.Root do for setOpeningMenu(undefined).

Work

I'm currently mark close state as empty string and it seems to work.

const [openingMenu, setOpeningMenu] = React.useState('')
// close NavigationMenuby
setOpeningMenu('')

My Question

1. The correct way to controll Navigation Menu
2. If it's good to include an example or some statement to the doc
3. Whether NavigationMenu.Root should be close if the controlled value is set to undefined

Some clips for the sample code

bandicam.2023-05-02.17-20-00-368.mp4

bandicam.2023-05-02.17-20-08-891.mp4

bandicam.2023-05-02.17-20-20-553.mp4

[benoitgrelard]

But since it is controlled, for react, value should not be undefined. It also makes it unclear what should NavigationMenu.Root do for setOpeningMenu(undefined).

Yes that's correct. Controlling it and setting it back to undefined is essentially trying to set it back to "uncontrolled" so should be avoided. The same is true for any component in React (ie. the same is true with native input for example and React will actually warn you if you do this).

[QzCurious]

Thanks.

For controlled NavigationMenu, a '' (or any string that more meaningful) as reset value for close state is the way to go.