useFocusVisible

useFocusVisible helps you determine whether keyboard focus is visible globally. Sometimes standard :focus-visible pseudo-class is not enough. In those cases, you may want to style a wrapper element based on nested input.

In many cases, our custom Tailwind CSS focus-visible-within variant will might be enough an shuold be preferred. However, if you require information about focus state in JavaScript, this hook provides a solution.

Input default behaviour

Most browsers implements :focus-visible pseudo-class to activate on every focus event. It means by default your inputs would get focus ring even if you set them only on focus visible and disabled them on focus. You can see the difference in the example below. Try to focus both inputs using mous and using tab. First input will get focus ring no matter if you click or tab on it, while the second one will get the focus ring only when using tab.

<template>
  <div>
    <label class="inline-block m-2">
      <span>Default focus visible</span>
      <input class="block bg-gray-100 p-2 rounded-md focus:outline-hidden focus-visible:ring-2" />
    </label>
    <label class="inline-block m-2">
      <span>Custom focus visible</span>
      <input
        :class="['block bg-gray-100 p-2 rounded-md focus:outline-hidden', { 'focus-visible:ring-2': isFocusVisible }]"
      />
    </label>
  </div>
</template>

<script lang="ts" setup>
import { useFocusVisible } from '@storefront-ui/vue';
const { isFocusVisible } = useFocusVisible({ isTextInput: true });
</script>