Vue 3 useFocus Composable for DOM Focus

import { ref, watch, nextTick } from 'vue';

function useFocus() {
  const elementToFocus = ref(null); // Ref to link to the DOM element

  /**
   * Sets focus to the specified element when it becomes available.
   * @param {HTMLElement | null} element The DOM element to focus.
   */
  const setFocus = (element) => {
    if (element && typeof element.focus === 'function') {
      element.focus();
    }
  };

  // Watch for changes to elementToFocus and apply focus
  watch(elementToFocus, (newElement) => {
    if (newElement) {
      // Ensure the element is mounted in the DOM before trying to focus
      nextTick(() => {
        setFocus(newElement);
      });
    }
  });

  return { elementToFocus, setFocus };
}

// Example Usage in a component:
// <template>
//   <div>
//     <button @click="focusInput">Focus Input</button>
//     <input ref="inputRef" type="text" placeholder="I can be focused" />
//     <button @click="focusButton">Focus Another Button</button>
//     <button ref="anotherButtonRef" type="button">Another Button</button>
//   </div>
// </template>
//
// <script setup>
// import { ref } from 'vue';
// import useFocus from './composables/useFocus';
//
// const { elementToFocus, setFocus } = useFocus();
//
// // Template refs for direct element binding
// const inputRef = ref(null);
// const anotherButtonRef = ref(null);
//
// const focusInput = () => {
//   elementToFocus.value = inputRef.value; // Assign the template ref
// };
//
// const focusButton = () => {
//   setFocus(anotherButtonRef.value); // Use the utility function
// };
// </script>

export default useFocus;