Control popover by hovering and outside interactions

[daninus14]

This discussion talks about controlling a popover by hovering using the isOpen controlled state. @snowystinger Thanks for the answer there.

However, doing that makes it so that we loose:

1. Accessibility features for touch screens
2. Clicking outside of the popover does not close it

Here is the sample code for reference

<div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="flex justify-center"
    >
      <DialogTrigger>
        <Button
          onPress={() => setHover(!hover)}

<Popover
          isOpen={hover}

Note that the onPress above did not help for touch screens, probably because pressing and hovering overlap. With iPad mini's having large resolutions, it's hard to tell if we are on a computer or touch only environment and resolution based rendering will not help us here.

I know that the component by default has a lot of the accessibility taken care of, so I am a bit concerned of using this as a controlled component since I probably loose all of that, just to make it open with hover. Could we use the TooltipTrigger in combination with the DialogTrigger to get the benefits of both hover and the built in accessibility functionality?

Summary of Questions

1. How can we close the popover by pressing on the button again when the popover is open? This is while keeping the hover functionality.
2. Is there a built in way to get the hover functionality and keep all the accessibility features?
3. How to make it so that clicking outside of the popover will close it?

[snowystinger]

There's no such thing as hover on a touch screen. This is why tooltips are not accessible. Checking screen resolution is not a reliable way to check if the environment is touch only, as you've noted, and there isn't any way to determine this as of the time of writing this. People can connect a keyboard to an iPad for instance, or they may be using VoiceOver.

I'm guessing the onPress isn't firing on the button in the dialog trigger because there is an underlay. You may have to do more work to hook up events to support this. Overall it's not recommended because hover isn't an accessible pattern.

[daninus14]

Thanks for replying.

So basically you are advising against using hover. Did I understand correctly? if not, what did you mean by "it's not recommended"? What is not recommended?

What do mean by an underlay?

What events may be hooked up?

I updated the question with a summary in the end for clarity.

[snowystinger]

Yes, I'm advising against using hover. "It's not recommended" was referring to using hover to control the showing/hiding of an element.

An underlay is an element which sits under an overlay and blocks interactions with the things "behind" the overlay. https://react-spectrum.adobe.com/react-aria/Modal.html#features

Closing the popover when you click outside can be enabled with shouldCloseOnInteractOutside see the prop table in https://react-spectrum.adobe.com/react-aria/Popover.html
This should "hook up" the events I was mentioning for you. Otherwise you'll need to listen for press/click/touch/whatever makes sense in order to close when you interact outside.

We do not have a built in way to hover open popovers at this point in time. We may eventually allow for that, but it's not high in our priorities.

[daninus14]

Great, thanks!