adobe / adobe/react-spectrum

Adding the ability to differentiate between interaction types on overlay closure in `useOverlay`

Open
#2,192 6 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🙋 Feature Request

Add the ability to differentiate between different interactions in order to perform specific tasks such as "apply" on an outside click and "remove all changes" on `escape` key presses.

## 🤔 Expected Behavior

The event object (or some other way of interaction differentiation) should be passed through to `onClose()` in order for the consumer to determine what happened that cause the `onClose()` handler to run and how to handle it.

## 😯 Current Behavior

The [`useOverlay` hook](https://react-spectrum.adobe.com/react-aria/useOverlay.html) handles the behavior for overlays when an interaction happens outside of said overlay but it does not allow consumers to know what type of interaction caused the overlay to close.

## 💁 Possible Solution

Possibly passing the events through into [`onHide()`](https://github.com/adobe/react-spectrum/blob/7f2b41456aeeaa4dc70a6403b70fb829a67b0e71/packages/%40react-aria/overlays/src/useOverlay.ts#L86-L90) which then passes it to `onClose()` for consumer usage?

## 🔦 Context

I am using the different overlay hooks to create a popover dialog that happens to contain a date picker. The behavior I require for this component is:

* If the user clicks outside of the trigger element, apply the dates.
* If the user presses the "Escape" key, close the popover and do nothing with the dates.

[Original discussion](https://github.com/adobe/react-spectrum/discussions/1992)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.