[paragon-openedx.netlify.app] Feedback (on /components/menu/select-menu/)

Feedback summary

I wanted to flag some potentially less than ideal behavior related to the SelectMenu component that I noticed while working with this and the SearchField component. Below is more detailed context:

I was attempting to create a SelectMenu that has a SearchField as its first MenuItem. When an MenuItem is selected, selected is set based on the index in SelectMenu.jsx here. This const is then used to set the offset to scroll to the center of the menu here.

The problem is, that when a user selects an item in the menu, THEN searches using the search field, they get this error: TypeError Cannot read properties of undefined (reading 'current'). This only happens when the selected item has an index that is beyond the range of the filtered MenuItems array.

Improvements

If the number of MenuItems changes in a SelectMenu (like in the example above when the items are filtered using a SearchField), then the selected const should be updated to reflect this change. Otherwise, there will be a TypeError.

Bugs

Start in src/Menu/SelectMenu.jsx at the selected calculation around line 38 and the scroll offset around line 62, with the SearchField and filtered MenuItem behavior described in the issue. Reproduce selecting an item and then filtering the menu; done means filtering no longer causes the undefined-current TypeError and selected reflects the changed items.