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

[MoistCode]

🙋 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 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() 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

[snowystinger]

Thanks for opening this!

[LFDanLu]

Seems to be relatively straightforward, like you said we could pass the event object through onHide here and here
and then pass it through to onClose here.

Checking e.pointerType+ e.key would allow you to differentiate a pointer click and the Escape key, perhaps could handle that logic in the hook itself and pass something simplified to onClose like pointer/keyboard/etc.

[kwoncharles]

Hi @LFDanLu. Can I work on it?

Edited

Oh, I didn't see the Not Groomed status. Wouldn't it be better to work after grooming?

[LFDanLu]

@kwoncharles We'll hopefully groom this one tomorrow and update the ticket then. Feel free to play around with the possible solution I mentioned above, would be good to validate if it works.

[snowystinger]

Hi @kwoncharles / @MoistCode
During our meeting today, it came up that there may be an accessibility concern here. If we distinguish between Esc and Clicking outside, how can a keyboard user confirm their input since they potentially cannot click outside?

We aren't keen to support Enter in this role because the user might be in a form element. This would require implementors to add a confirm button of some sort, which puts a heavy reliance on implementors to 'do the right thing'. We'd need a solution that we can enforce for good accessibility.

[dvasyliev]

You can handle outside clicks by using the shouldCloseOnInteractOutside prop in the useOverlay hook or ModalOverlay component:

function handleInteractOutside() {
  console.log("It's click outside!")
  return true;
}

Then pass it like this:

<ModalOverlay shouldCloseOnInteractOutside={handleInteractOutside} /* other props */, />

or

let { overlayProps } = useOverlay({
  shouldCloseOnInteractOutside: handleInteractOutside,
  /* other props */,
}, ref);