openui / openui/open-ui

[interesttarget] Are `popover-show-delay` and `popover-hide-delay` needed? Can they be abstracted?

Open
#781 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

needs-triage popover
Dominant language
MDX
Stars
4.5k
Forks
226
Avg merge
2d 22h
Merged PRs (30d)
4

Description

Pulling this out from https://github.com/openui/open-ui/pull/766/files/2232ac991582913f820d1a50709963a3d1f55c9c

@keithamus
These two properties feel useful for more than this. What intrinsic behaviours are needed for these?

Another curiosity; popover-show-delay is somewhat replicable with animation-delay or transition-delay but popover-hide-delay is not. I wonder if there's a bigger problem that can be solved here, for example adding animation-exit states which trigger when a node moves out of a CSS state?

@mfreed7
Interesting feedback! I had envisioned these to work with popovers (and maybe dialogs?) only. How do you envision making them more general?

As to popover-show-delay I'm not sure this can be done with animation-delay - can you prove me wrong? My concern is that the behavior wouldn't be de-bounced in that case. I.e. set popover-show-delay to 0.5 seconds, and have the user hover and then de-hover the element only for 0.2 seconds. Nothing should happen, but I think animation-delay would cause the popover to just be shown after 0.5 seconds, right?

@keithamus
https://codepen.io/keithamus/pen/yLQabJK this uses animation-delay to ensure that as you hover and de-hover (or focus/defocus) the button for less than 0.5s, the div will not be shown. I believe this is properly debounced as you describe. I don't know how to get the same effect upon exit of that state; transitions don't work quite the same, I believe.

@mfreed7
Ahh nice - I see that you get that by adding :focus to clear the animation if you de-hover. But you're right - not possible on the de-hover side of things.

Do you think this is worth opening a CSSWG issue to discuss? I mean about the "more general problem" question?

I've also filed https://github.com/w3c/csswg-drafts/issues/9062 to solicit some discussion from CSSWG about this.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Begin with the discussion in this issue, the referenced changes in PR #766, and the related CSSWG issue #9062. Determine whether the popover delay properties should remain specific or become a more general CSS behavior, and document the resulting design decision; no implementation file or test is named.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.