Always applies focus-visible to inputs in React even when click

[sklawren]

This script gets confused in React with inputs. When you click on them, it adds the various focus-visible settings as if you used the keyboard to select them.

This does not happen with other elements like select, button, etc.

[timgoeller]

Seems to be the case in Vue.js aswell (so maybe it's not framework-related).

[Justineo]

I believe it's intentional and not framework-related. Focusing an input indicates that the user should switch their input modality to keyboard.

focus-visible/src/focus-visible.js

Lines 59 to 69 in ea5722d

	if (tagName === 'INPUT' && inputTypesAllowlist[type] && !el.readOnly) {
	return true;
	}
	if (tagName === 'TEXTAREA' && !el.readOnly) {
	return true;
	}
	if (el.isContentEditable) {
	return true;
	}

[timgoeller]

@Justineo Ah, that makes sense! The spec also suggests that (basically) anything that you can type in should indicate focus (though the decision is ultimately made by the User-Agent). 👍