FocusNext Plugin

Overview

A Vue plugin that provides a global method to programmatically focus on the next element in a form or interface by its ID or ref name. Handles various input types and special components like multiselect.

---

Detail

$focusNext(nextElementId: string)

A global method added to Vue's instance that focuses on a DOM element or activates a component by its ID or ref.

Parameters:

Parameter	Type	Required	Description
nextElementId	string	Yes	The ID of the element to focus, or the name of the ref for a component

Behavior:

1. First checks if there's a ref with the given name that has an activate() method (for custom components like multiselect)
2. If no ref is found or it doesn't have an activate() method, looks for a DOM element with the matching ID
3. When a DOM element is found, calls the appropriate focus method based on the element type:
   • For <input> and <textarea>: calls focus()
   • For <button>: calls focus()
   • For other elements: no focus action is taken

---

Usage Examples

Basic Usage with Element IDs

<template>
  <form>
    <input id="name" v-model="name" />
    <input id="email" v-model="email" />

    <button @click="$focusNext("email")">Next</button>
  </form>
</template>

<script setup>
import { ref } from "vue";

const name = ref("");
const email = ref("");
</script>

Usage with Component Refs

<template>
  <form>
    <input id="name" v-model="name" />
    <multi-select
      ref="category"
      :options="categories"
      v-model="selectedCategory"
    />

    <button @click="$focusNext("category")">Next</button>
  </form>
</template>

<script setup>
import { ref } from "vue";

const name = ref("");
const categories = ref(["A", "B", "C"]);
const selectedCategory = ref("");
</script>

Usage in Setup Script

<template>
  <form>
    <multi-select
      ref="category"
      :options="categories"
      v-model="selectedCategory"
    />

    <button @click="focusCategory">Next</button>
  </form>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";

const categories = ref(["A", "B", "C"]);
const selectedCategory = ref("");
const instance = getCurrentInstance();

const focusCategory = () => {
  instance.proxy.$focusNext("category");
};
</script>

Usage in Options API

<template>
  <form>
    <input id="username" v-model="username" />
    <button @click="focusUsername">Focus Username</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: "",
    };
  },
  methods: {
    focusUsername() {
      this.$focusNext("username");
    },
  },
};
</script>

---

Component Support

The plugin is designed to work with:

1. Standard HTML elements:

   • <input> - Text fields, checkboxes, radios, etc.
   • <textarea> - Multi-line text inputs
   • <button> - Standard buttons

2. Custom components that implement an activate() method:

   • Particularly useful for complex form components like multiselect dropdowns
   • Must be referenced using Vue refs (not ID selectors)

---

Notes

• Uses Vue's global properties system to add the $focusNext method
• When using Composition API, you must get an instance via getCurrentInstance()
• Elements without IDs or refs with the specified name will be ignored
• For elements other than inputs, textareas, and buttons, no focus action is taken
• Works well for implementing keyboard navigation in forms