search

ten1seven / what-input

A global utility for tracking the current input method (mouse/pointer, keyboard or touch).
https://ten1seven.github.io/what-input
MIT License
1.35k stars 89 forks source link

:focus-visible behavior? #90

Open FezVrasta opened 5 years ago

FezVrasta commented 5 years ago

The :focus-visible selector matches almost every time the [data-whatinput=keyboard] is active, but even when the user clicks on an input element with the mouse.

Is there any way to mimic this behavior with what-input?

ten1seven commented 5 years ago

Hi @FezVrasta, thanks for bringing this up. I've had :focus-visible on my radar for a while to look into. What Input has been around longer than :focus-visible so it's not meant as a polyfill, but I'm interested in looking into the differences in behavior and seeing if there are any opportunities to make them behave similarly.

phun-ky commented 2 years ago

@ten1seven with that beeing said, is there a need for whatinput when we have :focus-visible ? (if we only use what-input to display focus ring for keyboard users)

ten1seven commented 2 years ago

@phun-ky it's very possible! If :focus-visible gets you what you need then I'd agree that jumping on the browser-native solution is the way to go. I don't make any money from what-input so I have no incentive to persuade anyone to use it if they don't need to 😄

Currently, I continue to use it because Safari still doesn't support :focus-visible, and I want a little more control over focus styles than what :focus-visible is providing. Hopping over to MDN's docs, clicking and tabbing through their basic example produces what I'd want for the buttons, but the mouse click response on the text input is the .focus-visible-only style that I'd normally want to treat differently (at least in my work).