:focus-visible behavior?

[FezVrasta]

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]

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]

@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]

@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).