[Bug]: Changing List navigationMode throws exception
Component
List
Package version
9.64.0
React version
18.2
Environment
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
npmPackages:
@fluentui/react-components: ^9.0.0 => 9.64.0
@fluentui/react-icons: latest => 2.0.300
@types/react: ^17 => 17.0.85
@types/react-dom: ^17 => 17.0.26
react: ^18 => 18.3.1
react-dom: ^18 => 18.3.1
Current Behavior
Changing navigationMode on the List component throws an error:
"ListItem cannot be rendered as a div when its parent is not a div"
Expected Behavior
It should not throw an exception -- it should instead wait to do the validation until the parent re-renders.
We do this because we render a list of data that is conditionally interactive. In some cases, it is just a list of items with no actions associated, and sometimes those actions are enabled and interactive. We don't know this until after we have asynchronously rendered the list, so at first the list is "disabled" by using navigationMode = "items", and then IF we get the information needed to render it as interactive we change it to composite, but this throws exceptions.
Reproduction
https://stackblitz.com/edit/xqpmvqqd?file=src%2Fexample.tsx,package.json
Steps to reproduce
- Open the provided stackblitz
- Toggle the checkbox
- Expected: The list items become interactive
- Actual: there is an exception
Are you reporting an Accessibility issue?
no
Suggested severity
Medium - Has workaround
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
Validations
- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [x] The provided reproduction is a minimal reproducible example of the bug.
This error is caused by the List validating the proper combination of elements and roles for list and list items. Please note that this only happens in dev mode, prod builds do not have this kind of validation. I have pushed a PR which will fix this issue.