fix: defineExpose focus and blur on Input items

Author: VividLemon

packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue

@@ -134,7 +134,7 @@ const parentData = inject(checkboxGroupKey, null)
 
 const input = ref<HTMLElement | null>(null)
 
-useFocus(input, {
+const {focused} = useFocus(input, {
   initialValue: autofocusBoolean.value,
 })
 
@@ -192,4 +192,13 @@ const classesObject = computed(() => ({
 const computedClasses = getClasses(classesObject)
 const inputClasses = getInputClasses(classesObject)
 const labelClasses = getLabelClasses(classesObject)
+
+defineExpose({
+  focus: () => {
+    focused.value = true
+  },
+  blur: () => {
+    focused.value = false
+  },
+})
 </script>

packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue

@@ -118,7 +118,7 @@ const validatedBoolean = useBooleanish(() => props.validated)
 
 const element = ref<HTMLElement | null>(null)
 
-useFocus(element, {
+const {focused} = useFocus(element, {
   initialValue: autofocusBoolean.value,
 })
 
@@ -198,4 +198,13 @@ const classesObject = computed(() => ({
 }))
 const computedAttrs = getGroupAttr(classesObject)
 const computedClasses = getGroupClasses(classesObject)
+
+defineExpose({
+  focus: () => {
+    focused.value = true
+  },
+  blur: () => {
+    focused.value = false
+  },
+})
 </script>

packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue

@@ -112,7 +112,7 @@ const stateClass = useStateClass(stateBoolean)
 
 const input = ref<HTMLInputElement | null>(null)
 
-useFocus(input, {initialValue: autofocusBoolean.value})
+const {focused} = useFocus(input, {initialValue: autofocusBoolean.value})
 
 const hasLabelSlot = computed(() => !isEmptySlot(slots['label']))
 const computedAccept = computed(() =>
@@ -143,4 +143,13 @@ const onDrop = (e: Event) => {
     e.preventDefault()
   }
 }
+
+defineExpose({
+  focus: () => {
+    focused.value = true
+  },
+  blur: () => {
+    focused.value = false
+  },
+})
 </script>

packages/bootstrap-vue-next/src/components/BFormInput/BFormInput.vue

@@ -106,6 +106,11 @@ const computedClasses = computed(() => {
   ]
 })
 
+defineExpose({
+  focus,
+  blur,
+})
+
 // const highlight = () => {
 //   if (isHighlighted.value === true) return
 //   isHighlighted.value = true

packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadio.vue

@@ -108,7 +108,7 @@ const parentData = inject(radioGroupKey, null)
 
 const input = ref<HTMLElement | null>(null)
 
-useFocus(input, {
+const {focused} = useFocus(input, {
   initialValue: autofocusBoolean.value,
 })
 
@@ -168,4 +168,13 @@ const classesObject = computed(() => ({
 const computedClasses = getClasses(classesObject)
 const inputClasses = getInputClasses(classesObject)
 const labelClasses = getLabelClasses(classesObject)
+
+defineExpose({
+  focus: () => {
+    focused.value = true
+  },
+  blur: () => {
+    focused.value = false
+  },
+})
 </script>

packages/bootstrap-vue-next/src/components/BFormRadio/BFormRadioGroup.vue

@@ -104,7 +104,7 @@ const validatedBoolean = useBooleanish(() => props.validated)
 
 const element = ref<HTMLElement | null>(null)
 
-useFocus(element, {
+const {focused} = useFocus(element, {
   initialValue: autofocusBoolean.value,
 })
 
@@ -165,4 +165,13 @@ const classesObject = computed(() => ({
 }))
 const computedAttrs = getGroupAttr(classesObject)
 const computedClasses = getGroupClasses(classesObject)
+
+defineExpose({
+  focus: () => {
+    focused.value = true
+  },
+  blur: () => {
+    focused.value = false
+  },
+})
 </script>

packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue

@@ -119,7 +119,7 @@ const stateClass = useStateClass(stateBoolean)
 
 const input = ref<HTMLElement>()
 
-useFocus(input, {
+const {focused} = useFocus(input, {
   initialValue: autofocusBoolean.value,
 })
 
@@ -157,4 +157,13 @@ const localValue = computed({
     })
   },
 })
+
+defineExpose({
+  focus: () => {
+    focused.value = true
+  },
+  blur: () => {
+    focused.value = false
+  },
+})
 </script>

packages/bootstrap-vue-next/src/components/BFormTags/BFormTags.vue

@@ -12,15 +12,15 @@
       :id="`${computedId}selected_tags__`"
       class="visually-hidden"
       :for="_inputId"
-      :aria-live="focus ? 'polite' : 'off'"
+      :aria-live="focused ? 'polite' : 'off'"
       aria-atomic="true"
       aria-relevant="additions text"
       >{{ tags.join(', ') }}</output
     >
     <div
       :id="`${computedId}removed_tags__`"
       role="status"
-      :aria-live="focus ? 'assertive' : 'off'"
+      :aria-live="focused ? 'assertive' : 'off'"
       aria-atomic="true"
       class="visually-hidden"
     >
@@ -247,7 +247,6 @@ const _inputId = computed<string>(() => props.inputId || `${computedId.value}inp
 const tags = ref<string[]>(modelValue.value)
 const inputValue = ref<string>('')
 const shouldRemoveOnDelete = ref<boolean>(modelValue.value.length > 0)
-const focus = ref<boolean>(false)
 const lastRemovedTag = ref<string>('')
 const validTags = ref<string[]>([])
 const invalidTags = ref<string[]>([])
@@ -258,7 +257,7 @@ const computedClasses = computed(() => [
   {
     [`form-control-${props.size}`]: props.size !== 'md',
     disabled: disabledBoolean.value,
-    focus: focus.value,
+    focus: focused.value,
   },
 ])
 
@@ -334,12 +333,12 @@ const onFocus = (e: FocusEvent): void => {
     return
   }
 
-  focus.value = true
+  focused.value = true
   emit('focus', e)
 }
 
 const onBlur = (e: FocusEvent): void => {
-  focus.value = false
+  focused.value = false
   emit('blur', e)
 }
 
@@ -447,4 +446,14 @@ const removeTag = (tag?: string): void => {
   lastRemovedTag.value = tags.value.splice(tagIndex, 1).toString()
   modelValue.value = tags.value
 }
+
+// TODO these focus/blur events aren't quite in line with use useFormInput implementation. Perhaps we should bring them together?
+defineExpose({
+  focus: () => {
+    focused.value = true
+  },
+  blur: () => {
+    focused.value = false
+  },
+})
 </script>

packages/bootstrap-vue-next/src/components/BFormTextarea/BFormTextarea.vue

@@ -94,4 +94,9 @@ const computedClasses = computed(() => [
 const computedStyles = computed<CSSProperties>(() => ({
   resize: noResizeBoolean.value ? 'none' : undefined,
 }))
+
+defineExpose({
+  focus,
+  blur,
+})
 </script>