fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[Bug]: Changing List navigationMode throws exception

Open hoovercj opened this issue 8 months ago • 1 comments

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.

hoovercj avatar May 16 '25 15:05 hoovercj

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.

george-cz avatar Jun 09 '25 12:06 george-cz