atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
11.86k stars 520 forks source link

delay not working on focus #1034

Closed GodaP closed 2 years ago

GodaP commented 2 years ago

Bug description

Delay property is ignored when element is focused using keyboard.

Reproduction

This can be reproduced on Tippy.js documentation site -> all props -> delay

Steps to reproduce:

  1. Go to Tippy.js documentation site -> all props -> delay
  2. Focus "delay: 400" button in the example using a keyboard

Expected: a delay of 400ms is applied before displaying a tooltip (e.g. to compare - hover on the button using a mouse, you'll see the delay).

Actual: no delay happens, tooltip is displayed right away.

Note: I believe this is a bug, but let me know if this is intended behaviour. (If it is intended, then how could delay be achieved when triggering a tooltip with a keyboard focus?)

atomiks commented 2 years ago

It's intended as delay is usually only useful for mouse input:

https://github.com/atomiks/tippyjs/blob/ad85f6feb79cf6c5853c43bf1b2a50c4fa98e7a1/src/createTippy.ts#L198-L208

My assumption was that keyboard and touch usage shouldn't respect delay, e.g. screen readers that need to know the description as soon as possible. But this may not be required.

gaga1227 commented 5 months ago

Hi @atomiks, our team is currently experiencing the same issue described here. After examining the related source code and your comment above, you are right that in most cases the keyboard events should by default ignore the delay prop values for accessibility purpose. However, in our app, we do have special UX and accessibility requirements from time to time that would require the tooltip delay value to be honoured on keyboard focus. Would you reconsider this as a feature config? Or maybe introduce a new dedicated prop like focusDelay for when users do need the keyboard events delay in certain scenarios? Thanks in advance.