Search code examples
fluentui-react

FluentUI Grouped List not rendering


I'm new to react and fluentui development and am having trouble getting the Grouped List examples to work https://developer.microsoft.com/en-us/fluentui#/controls/web/groupedlist

Nothing renders until I remove the SelectionZone element. But then I can't select items.

I'm seeing the following error in the console (which doesn't mean much to me):

useFocusRects.js:67 Uncaught TypeError: Cannot read properties of undefined (reading 'current')

How should I troubleshoot this?

-- Edit --

I created a CodePen https://codepen.io/matthewfitzmaurice/pen/NWMbXNP . But the CodePen works fine...

I've also noticed that a form that I created containing TextField, DatePicker and ComboBox has stopped working. The error occurs when I use a ComboBox. It's fine if I only use TextFields and DatePickers.

My ComboBoxes were working and now are not. This seems to indicate that I've installed something and broken some of the FluentUI controls.


Solution

  • In case anyone else runs into the same issue, my problem was version related. Updating my npm packages fixed the issue.

    npm outdated
    npm update