Focus outline is not applied on mouse click?

[eight04]

• Browser: Chrome
• Operating System: Windows 7 x64
• Screenshot:
  

When the config dialog is opened, the first input is focused and has a blue outline, but if the input is getting focused again by mouse click, the outline disappears.

I think the focus indicator should be shown no matter how the input is getting focused.

[tophf]

This outline looks kinda acceptable on a text input but it's distracting on any other types of inputs in a typical click'n'set scenario, which is why we decided to hide it on mouse clicks and show on keyboard navigation.

The only solutions I see here:

1. do nothing since this quirk is not a big deal
2. suppress the initially displayed outline

[eight04]

it's distracting on any other types of inputs

Which elements? Maybe we should redesign their focus indicator.

suppress the initially displayed outline

Well, at least it would make them consistent.

[tophf]

I guess we'll show the default focus outline only when the config was invoked via keyboard.

Which elements?

All except the text input.
You can find more info in the relevant issues/PR.

Maybe we should redesign their focus indicator.

Other than the reported case, I feel our current solution is clean and simple moreover many apps and sites use it too e.g. github.

[eight04]

After some quick searchs, it seems that this behavior (hiding outlines of inputs) derives from original Stylish according to #291 (comment).

github

They have their own :focus style on buttons and text inputs, not removing them.

[tophf]

No, it's not about Stylish, it's what we implemented in #294.
As for github, they show the focus outline only on keyboard navigation for some stuff:

[eight04]

After checking some code of modal dialogs, I think the correct solution is:

1. When creating the dialog, mark the dialog as focusable (element.tabIndex).
2. Focus on the dialog element instead of the input inside the dialog.

So that if the user hit tab, the focus moves to the first input element inside the dialog.

[tophf]

I don't think so. In almost all UI I've seen over the last few decades the first focusable item is focused inside the dialog.

[eight04]

the first focusable item is focused inside the dialog.

The first focusable item is not consistent in our config dialog. Sometimes it is the form control of the first option but sometimes it is the "feedback" link, which means sometimes the first input get focused but sometimes not. If we need autofocus, I think we should focus on the first item requiring user input.

Tested with 26d7c26. If you have previously focused an item through tabs, the outline is still visible:

[tophf]

Agreed. I never really liked the feedback link getting focused.