GridList (in Popover) closes containing Modal on select

[raleighwavv]

As noted in another question, I've needed to implement a GridList in a Popover in order to allow buttons inside the option items.

The issue I'm running into now is that when the GridList is inside a Modal and extends into the ModalOverlay, selecting a GridListItem closes the Modal, whereas a Select component simply closes its popover.

Here is a StackBlitz example demonstrating the issue.

I wanted to ask here first before opening an issue in case there is some known way for the GridList to better mimic the selection behavior of a Select.

Thank you!

[snowystinger]

I opened the stackblitz, then clicked to open the gridlist popover. First thing I noticed is that focus isn't moving into the gridlist popover, so I checked and you're missing a Dialog inside the Popover for that component. This won't be necessary anymore in RAC 1.7, but I think the stackblitz is on 1.6. This was also making it impossible to keyboard navigate in the gridlist. You may need to put an autoFocus on the gridlist in RAC 1.7 as well, I don't remember if it'll get focused automatically.

I have not been able to reproduce selection causing the parent modal to close. Until I made the Dialog change, I don't think I was able to select. It never closed either itself or the parent.
With the Dialog change I can select and it closes the gridlist, but the parent stays open.

If this isn't what you're experiencing, can you write some explicit steps to reproduce, including every click/mouse movement/keyboard just to make sure I'm doing the same thing?

Thank you!

PS tested in Chrome 133

[raleighwavv]

I just upgraded to 1.7 and that does enable keyboard selection.

My issue is specifically with mouse clicks.

1. With the modal open, click "Open GridList Options"
2. The options should extend halfway into the ModalOverlay.
3. Clicking Option 1 (inside the modal) should close the options, but the modal remains open.
4. Clicking Option 4 (which is over the overlay) (not the Button within the option) will close the options, but it also closes the entire modal.
5. Conversely, opening the Select ("Select an item"), should display all the Select options into the ModalOverlay space.
6. Clicking any of the Select options simply selects and closes the Select options.

Thank you for taking a look!

[snowystinger]

Ah, looks like the gridlist is doing the selection on press start, which means the popover closes then as well. The user then finishes the click, which registers as a click outside and closes the parent.

So if we can close the gridlist popover during onPress, that'd solve it for now.
However, we should probably fix this in GridList by exposing the same prop that ListBox has, shouldSelectOnPressUp. That'd make your logic work out of the box.

Thanks for reporting this. I'm opening in Issue