Skip to content
Permalink
Browse files
feat(b-form-tags): add ignoreInputFocusSelector prop to make input …
…focus behavior configurable (closes #5425) (#5429)

* fix(b-form-tags): fix input focus upon clicking on nested element

* Update form-tags.js

* Add `ignoreInputFocusSelector` prop

* Update form-tags.js

* Add comment and more selectors to ignoreInputFocusSelector in form-tags.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
  • Loading branch information
paweltatarczuk and jacobmllr95 committed Jul 15, 2020
1 parent 5ee9830 commit 26d5953f834684d36b0af99da912dba08fd37bd8
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 7 deletions.
@@ -6,7 +6,15 @@ import identity from '../../utils/identity'
import looseEqual from '../../utils/loose-equal'
import { arrayIncludes, concat } from '../../utils/array'
import { getComponentConfig } from '../../utils/config'
import { attemptBlur, attemptFocus, matches, requestAF, select } from '../../utils/dom'
import {
attemptBlur,
attemptFocus,
closest,
isActiveElement,
matches,
requestAF,
select
} from '../../utils/dom'
import { isEvent, isFunction, isString } from '../../utils/inspect'
import { escapeRegExp, toString, trim, trimLeft } from '../../utils/string'
import idMixin from '../../mixins/id'
@@ -178,6 +186,12 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
type: Boolean,
default: false
},
ignoreInputFocusSelector: {
// Disable the input focus behavior when clicking
// on element matching the selector (or selectors)
type: [Array, String],
default: () => ['.b-form-tag', 'button', 'input', 'select']
},
value: {
// The v-model prop
type: Array,
@@ -245,6 +259,13 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
const joiner = this.computedSeparator.charAt(0)
return joiner !== ' ' ? `${joiner} ` : joiner
},
computeIgnoreInputFocusSelector() {
// Normalize to an single selector with selectors separated by `,`
return concat(this.ignoreInputFocusSelector)
.filter(identity)
.join(',')
.trim()
},
disableAddButton() {
// If 'Add' button should be disabled
// If the input contains at least one tag that can
@@ -416,7 +437,13 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
},
// --- Wrapper event handlers ---
onClick(evt) {
if (!this.disabled && isEvent(evt) && evt.target === evt.currentTarget) {
const ignoreFocusSelector = this.computeIgnoreInputFocusSelector
const { target } = evt
if (
!this.disabled &&
!isActiveElement(target) &&
(!ignoreFocusSelector || !closest(ignoreFocusSelector, target, true))
) {
this.$nextTick(() => {
this.focus()
})
@@ -630,8 +657,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
staticClass: 'list-unstyled mt-n1 mb-0 d-flex flex-wrap align-items-center',
attrs: { id: tagListId }
},
// `concat()` is faster than array spread when args are known to be arrays
concat($tags, $field)
[$tags, $field]
)

// Assemble the feedback
@@ -792,12 +818,12 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
'aria-describedby': this.safeId('_selected_')
},
on: {
click: this.onClick,
focusin: this.onFocusin,
focusout: this.onFocusout,
click: this.onClick
focusout: this.onFocusout
}
},
concat($output, $removed, $content, $hidden)
[$output, $removed, $content, $hidden]
)
}
})
@@ -110,6 +110,11 @@
{
"prop": "noOuterFocus",
"description": "When set, disables the focus styling of the component root element"
},
{
"prop": "ignoreInputFocusSelector",
"version": "2.16.0",
"description": "Ignore certain elements from the click to focus input routine, specified by css selector(s)"
}
],
"slots": [

1 comment on commit 26d5953

@vercel
Copy link

@vercel vercel bot commented on 26d5953 Jul 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.