feat(b-form-tags) added focus & blur events (closes #5947) (#6390)

* 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 Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
bootstrap-vue · Feb 2, 2021 · 05b8ffd · 05b8ffd
1 parent 9f045d4
commit 05b8ffd
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 21 deletions.
diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js
@@ -18,15 +18,7 @@ import { RX_SPACES } from '../../constants/regex'
 import { SLOT_NAME_DEFAULT, SLOT_NAME_ADD_BUTTON_TEXT } from '../../constants/slots'
 import { arrayIncludes, concat } from '../../utils/array'
 import { cssEscape } from '../../utils/css-escape'
-import {
-  attemptBlur,
-  attemptFocus,
-  closest,
-  isActiveElement,
-  matches,
-  requestAF,
-  select
-} from '../../utils/dom'
+import { attemptBlur, attemptFocus, closest, matches, requestAF, select } from '../../utils/dom'
 import { eventOn, eventOff, stopEvent } from '../../utils/events'
 import { identity } from '../../utils/identity'
 import { isEvent, isNumber, isString } from '../../utils/inspect'
@@ -39,6 +31,7 @@ import { formControlMixin, props as formControlProps } from '../../mixins/form-c
 import { formSizeMixin, props as formSizeProps } from '../../mixins/form-size'
 import { formStateMixin, props as formStateProps } from '../../mixins/form-state'
 import { idMixin, props as idProps } from '../../mixins/id'
+import { listenersMixin } from '../../mixins/listeners'
 import { normalizeSlotMixin } from '../../mixins/normalize-slot'
 import { BButton } from '../button/button'
 import { BFormInvalidFeedback } from '../form/form-invalid-feedback'
@@ -144,6 +137,7 @@ const props = makePropsConfigurable(
 export const BFormTags = /*#__PURE__*/ Vue.extend({
   name: NAME_FORM_TAGS,
   mixins: [
+    listenersMixin,
     idMixin,
     modelMixin,
     formControlMixin,
@@ -186,6 +180,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     },
     computedInputHandlers() {
       return {
+        ...this.bvListeners,
         input: this.onInputInput,
         change: this.onInputChange,
         keydown: this.onInputKeydown,
@@ -338,10 +333,6 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
       //   will prevent the tag from being removed (i.e. confirmation)
       //   Or emit cancelable `BvEvent`
       this.tags = this.tags.filter(t => t !== tag)
-      // Return focus to the input (if possible)
-      this.$nextTick(() => {
-        this.focus()
-      })
     },
     reset() {
       this.newTag = ''
@@ -413,13 +404,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     },
     // --- Wrapper event handlers ---
     onClick(event) {
-      const ignoreFocusSelector = this.computeIgnoreInputFocusSelector
-      const { target } = event
-      if (
-        !this.disabled &&
-        !isActiveElement(target) &&
-        (!ignoreFocusSelector || !closest(ignoreFocusSelector, target, true))
-      ) {
+      const { computeIgnoreInputFocusSelector: ignoreFocusSelector } = this
+      if (!ignoreFocusSelector || !closest(ignoreFocusSelector, event.target, true)) {
         this.$nextTick(() => {
           this.focus()
         })
@@ -434,7 +420,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     handleAutofocus() {
       this.$nextTick(() => {
         requestAF(() => {
-          if (this.autofocus && !this.disabled) {
+          if (this.autofocus) {
             this.focus()
           }
         })

diff --git a/src/components/form-tags/form-tags.spec.js b/src/components/form-tags/form-tags.spec.js
@@ -842,4 +842,41 @@ describe('form-tags', () => {
 
     wrapper.destroy()
   })
+
+  it('emits focus and blur events', async () => {
+    const onFocus = jest.fn()
+    const onBlur = jest.fn()
+    const wrapper = mount(BFormTags, {
+      propsData: {
+        value: ['apple', 'orange']
+      },
+      listeners: {
+        focus: onFocus,
+        blur: onBlur
+      }
+    })
+
+    expect(onFocus).not.toHaveBeenCalled()
+    expect(onBlur).not.toHaveBeenCalled()
+
+    const $input = wrapper.find('input')
+    expect(typeof wrapper.vm.$listeners.focus).toBe('function')
+
+    $input.trigger('focus')
+    $input.trigger('focusin')
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    expect(onFocus).toHaveBeenCalled()
+    expect(onBlur).not.toHaveBeenCalled()
+
+    $input.trigger('blur')
+    $input.trigger('focusout')
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    expect(onBlur).toHaveBeenCalled()
+
+    wrapper.destroy()
+  })
 })