search

youseedk / dna

CSS framework for yousee.dk
ISC License
6 stars 6 forks source link

Focus-visible not working correctly on input fields #279

Open grandorf opened 3 years ago

grandorf commented 3 years ago

Apparently the focus-visible technique is not working properly (I used chrome).

Expected result would be to only show the focus state on tabbing with keyboard. If I focus using the mouse it is not necessary to add the blue outline. But it does.

This seems to work for checkbox and radio buttons so there must be a bug in CSS.

image

rtatarinov4xxi commented 3 years ago

I agree with author of issue. This issue is duplicate for this: https://github.com/WICG/focus-visible/issues/131 However, I think it needs to be customize for user. I, like an user need to able to enable focus by keydown of "tab" only, without click, even if default behavior is a focus-visible when focus in input field.

MBehtemam commented 3 years ago

also I need this, currently I disabled it with !important as it's not a good idea.

havgry commented 3 years ago

Hmm, is this a regression? I haven't checked previous versions, but I don't remember this behaviour. Wasn't outline disabled altogether?

dechowdev commented 3 years ago

Still an issue to this day :) image

I think maybe we should heavily consider utilizing :focus instead of :focus-visible - as we do indicate the focus / state change with our own border - outline.

I don't believe having competing colors and focus states will aid this - I would actually recommend us utilizing the background color of the input field, as else we will have multiple fighting borders.

maciej-panecki-wttech commented 3 years ago

This is not an issue. It seems counter intuitive but according to specs: https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo

Any element which supports keyboard input (such as an input element, or any other element which may trigger a virtual keyboard to be shown on focus if a physical keyboard is not present) should always match :focus-visible when focused.