feat(b-form-tags): adds focusin & focusout to wrapper and prevents firing multiple focus/blur events (#6395)

* adds focus and blur events to b-form-tags

* fixed clicks near margin of wrapper not focusing input

* fixed merging error

* Update form-tags.js

* Update form-tags.js

* Update _form-tags.scss

* Update form-tags.js

* Update form-tags.js

* Update form-tags.js

* patched focus & blur on input + focusin & focusout on wrapper; test w.i.p.

* attached focusin and focusout to wrapper

* updated test

* Update events.js

* Update form-tags.js

* updated docs

* Update package.json

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

Author: andrei-gheorghiu

src/components/form-input/package.json

@@ -77,7 +77,7 @@
         "events": [
           {
             "event": "blur",
-            "description": "Emitted after the input looses focus",
+            "description": "Emitted after the input loses focus",
             "args": [
               {
                 "arg": "event",

src/components/form-tags/form-tags.js

@@ -2,7 +2,14 @@
 // Based loosely on https://adamwathan.me/renderless-components-in-vuejs/
 import { Vue } from '../../vue'
 import { NAME_FORM_TAGS } from '../../constants/components'
-import { EVENT_NAME_TAG_STATE, EVENT_OPTIONS_PASSIVE } from '../../constants/events'
+import {
+  EVENT_NAME_BLUR,
+  EVENT_NAME_FOCUS,
+  EVENT_NAME_FOCUSIN,
+  EVENT_NAME_FOCUSOUT,
+  EVENT_NAME_TAG_STATE,
+  EVENT_OPTIONS_PASSIVE
+} from '../../constants/events'
 import { CODE_BACKSPACE, CODE_DELETE, CODE_ENTER } from '../../constants/key-codes'
 import {
   PROP_TYPE_ARRAY,
@@ -24,7 +31,7 @@ import { identity } from '../../utils/identity'
 import { isEvent, isNumber, isString } from '../../utils/inspect'
 import { looseEqual } from '../../utils/loose-equal'
 import { makeModelMixin } from '../../utils/model'
-import { pick, sortKeys } from '../../utils/object'
+import { omit, pick, sortKeys } from '../../utils/object'
 import { hasPropFunction, makeProp, makePropsConfigurable } from '../../utils/props'
 import { escapeRegExp, toString, trim, trimLeft } from '../../utils/string'
 import { formControlMixin, props as formControlProps } from '../../mixins/form-control'
@@ -154,7 +161,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
       // Tags that were removed
       removedTags: [],
       // Populated when tags are parsed
-      tagsState: cleanTagsState()
+      tagsState: cleanTagsState(),
+      focusState: null
     }
   },
   computed: {
@@ -180,9 +188,11 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     },
     computedInputHandlers() {
       return {
-        ...this.bvListeners,
-        input: this.onInputInput,
+        ...omit(this.bvListeners, [EVENT_NAME_FOCUSIN, EVENT_NAME_FOCUSOUT]),
+        blur: this.onInputBlur,
         change: this.onInputChange,
+        focus: this.onInputFocus,
+        input: this.onInputInput,
         keydown: this.onInputKeydown,
         reset: this.reset
       }
@@ -411,11 +421,39 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
         })
       }
     },
-    onFocusin() {
+    onInputFocus(event) {
+      if (this.focusState !== 'out') {
+        this.focusState = 'in'
+        this.$nextTick(() => {
+          requestAF(() => {
+            if (this.hasFocus) {
+              this.$emit(EVENT_NAME_FOCUS, event)
+              this.focusState = null
+            }
+          })
+        })
+      }
+    },
+    onInputBlur(event) {
+      if (this.focusState !== 'in') {
+        this.focusState = 'out'
+        this.$nextTick(() => {
+          requestAF(() => {
+            if (!this.hasFocus) {
+              this.$emit(EVENT_NAME_BLUR, event)
+              this.focusState = null
+            }
+          })
+        })
+      }
+    },
+    onFocusin(event) {
       this.hasFocus = true
+      this.$emit(EVENT_NAME_FOCUSIN, event)
     },
-    onFocusout() {
+    onFocusout(event) {
       this.hasFocus = false
+      this.$emit(EVENT_NAME_FOCUSOUT, event)
     },
     handleAutofocus() {
       this.$nextTick(() => {

src/components/form-tags/form-tags.spec.js

@@ -843,7 +843,7 @@ describe('form-tags', () => {
     wrapper.destroy()
   })
 
-  it('emits focus and blur events', async () => {
+  it('emits focus and blur events when wrapper gains/loses focus', async () => {
     const onFocus = jest.fn()
     const onBlur = jest.fn()
     const wrapper = mount(BFormTags, {
@@ -864,6 +864,7 @@ describe('form-tags', () => {
 
     $input.trigger('focus')
     $input.trigger('focusin')
+
     await waitNT(wrapper.vm)
     await waitRAF()
 
@@ -879,4 +880,40 @@ describe('form-tags', () => {
 
     wrapper.destroy()
   })
+
+  it('emits focusin and focusout when internal focus changes', async () => {
+    const onFocusIn = jest.fn()
+    const onFocusOut = jest.fn()
+    const wrapper = mount(BFormTags, {
+      propsData: {
+        value: ['apple', 'orange']
+      },
+      listeners: {
+        focusin: onFocusIn,
+        focusout: onFocusOut
+      }
+    })
+
+    expect(onFocusIn).not.toHaveBeenCalled()
+    expect(onFocusOut).not.toHaveBeenCalled()
+
+    const $input = wrapper.find('input')
+    const $tag = wrapper.find('.b-form-tag')
+
+    $input.trigger('focusin')
+
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    expect(onFocusIn).toHaveBeenCalledTimes(1)
+    expect(onFocusOut).not.toHaveBeenCalled()
+
+    $tag.trigger('focusin')
+    $input.trigger('focusout')
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    expect(onFocusIn).toHaveBeenCalledTimes(2)
+    expect(onFocusOut).toHaveBeenCalledTimes(1)
+  })
 })

src/components/form-tags/package.json

@@ -130,6 +130,50 @@
           }
         ],
         "events": [
+          {
+            "event": "blur",
+            "description": "Emitted when component loses focus",
+            "args": [
+              {
+                "arg": "event",
+                "type": "FocusEvent",
+                "description": "Native blur event (before any formatting)"
+              }
+            ]
+          },
+          {
+            "event": "focus",
+            "description": "Emitted when component gains focus",
+            "args": [
+              {
+                "arg": "event",
+                "type": "FocusEvent",
+                "description": "Native focus event (before any formatting)"
+              }
+            ]
+          },
+          {
+            "event": "focusin",
+            "description": "Emitted when internal elements of component gain focus.",
+            "args": [
+              {
+                "arg": "event",
+                "type": "FocusEvent",
+                "description": "Native focusin event (before any formatting)"
+              }
+            ]
+          },
+          {
+            "event": "focusout",
+            "description": "Emitted when internal elements of component lose focus.",
+            "args": [
+              {
+                "arg": "event",
+                "type": "FocusEvent",
+                "description": "Native focusout event (before any formatting)"
+              }
+            ]
+          },
           {
             "event": "input",
             "description": "Emitted when the tags changes. Updates the v-model",

src/components/form-textarea/package.json

@@ -73,7 +73,7 @@
         "events": [
           {
             "event": "blur",
-            "description": "Emitted after the textarea looses focus",
+            "description": "Emitted after the textarea loses focus",
             "args": [
               {
                 "arg": "event",

src/components/tooltip/helpers/bv-tooltip.js

@@ -705,7 +705,7 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
           eventOn(el, 'focusin', this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
           eventOn(el, 'focusout', this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
         } else if (trigger === 'blur') {
-          // Used to close $tip when element looses focus
+          // Used to close $tip when element loses focus
           /* istanbul ignore next */
           eventOn(el, 'focusout', this.handleEvent, EVENT_OPTIONS_NO_CAPTURE)
         } else if (trigger === 'hover') {

src/constants/events.js

@@ -16,6 +16,7 @@ export const EVENT_NAME_ENABLE = 'enable'
 export const EVENT_NAME_ENABLED = 'enabled'
 export const EVENT_NAME_FILTERED = 'filtered'
 export const EVENT_NAME_FIRST = 'first'
+export const EVENT_NAME_FOCUS = 'focus'
 export const EVENT_NAME_FOCUSIN = 'focusin'
 export const EVENT_NAME_FOCUSOUT = 'focusout'
 export const EVENT_NAME_HEAD_CLICKED = 'head-clicked'