Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GridList (in Popover) closes containing Modal on select #7887

Open
snowystinger opened this issue Mar 7, 2025 · 4 comments · May be fixed by #7922
Open

GridList (in Popover) closes containing Modal on select #7887

snowystinger opened this issue Mar 7, 2025 · 4 comments · May be fixed by #7922
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@snowystinger
Copy link
Member

We should probably have GridList expose shouldSelectOnPressUp like we do in ListBox. See discussion for example use case.

Discussed in #7880

Originally posted by raleighwavv March 7, 2025
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 snowystinger added enhancement New feature or request good first issue Good for newcomers labels Mar 7, 2025
@YumiChen
Copy link

YumiChen commented Mar 9, 2025

I'd like to work on this issue. Looking into adding shouldSelectOnPressUp prop to GridList

@chirokas
Copy link
Contributor

@snowystinger To prevent unexpected interactions, should onClose only be triggered when both onInteractOutsideStart and onInteractOutside occur on the same visibleOverlay?

@snowystinger
Copy link
Member Author

We could explore that as a possibility as well. I think for now we can get it started though by matching ListBox

@suyash5053
Copy link
Contributor

Hey @snowystinger , In the stackblitz code provided, it just a one line code addition which will stop this behaviour that is using e.stopPropagation() on the handleSelectionChange function.
The new function will look like

const handleSelectionChange = () => {
    e.stopPropagation();
    setIsOpen(false);
  };

Now I am thinking about how can I append this change.

@YumiChen YumiChen linked a pull request Mar 13, 2025 that will close this issue
Open
5 tasks
@snowystinger snowystinger mentioned this issue Mar 27, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Feat: add shouldSelectOnPressUp prop to GridList YumiChen/react-spectrum
4 participants
@snowystinger @YumiChen @suyash5053 @chirokas