@gitlab/ui 84.2.0 → 85.0.1

package/src/vendor/bootstrap-vue/src/components/form-tags/form-tags.js

@@ -0,0 +1,891 @@
+// Tagged input form control
+// Based loosely on https://adamwathan.me/renderless-components-in-vuejs/
+import { extend } from '../../vue'
+import { NAME_FORM_TAGS } from '../../constants/components'
+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,
+  PROP_TYPE_ARRAY_OBJECT_STRING,
+  PROP_TYPE_ARRAY_STRING,
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_FUNCTION,
+  PROP_TYPE_NUMBER,
+  PROP_TYPE_OBJECT,
+  PROP_TYPE_STRING
+} from '../../constants/props'
+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, 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'
+import { looseEqual } from '../../utils/loose-equal'
+import { makeModelMixin } from '../../utils/model'
+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'
+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'
+import { BFormText } from '../form/form-text'
+import { BFormTag } from './form-tag'
+
+// --- Constants ---
+
+const {
+  mixin: modelMixin,
+  props: modelProps,
+  prop: MODEL_PROP_NAME,
+  event: MODEL_EVENT_NAME
+} = makeModelMixin('value', {
+  type: PROP_TYPE_ARRAY,
+  defaultValue: []
+})
+
+// Supported input types (for built in input)
+const TYPES = ['text', 'email', 'tel', 'url', 'number']
+
+// Default ignore input focus selector
+const DEFAULT_INPUT_FOCUS_SELECTOR = ['.b-form-tag', 'button', 'input', 'select'].join(' ')
+
+// --- Helper methods ---
+
+// Escape special chars in string and replace
+// contiguous spaces with a whitespace match
+const escapeRegExpChars = str => escapeRegExp(str).replace(RX_SPACES, '\\s')
+
+// Remove leading/trailing spaces from array of tags and remove duplicates
+const cleanTags = tags => {
+  return concat(tags)
+    .map(tag => trim(toString(tag)))
+    .filter((tag, index, arr) => tag.length > 0 && arr.indexOf(tag) === index)
+}
+
+// Processes an input/change event, normalizing string or event argument
+const processEventValue = event =>
+  isString(event) ? event : isEvent(event) ? event.target.value || '' : ''
+
+// Returns a fresh empty `tagsState` object
+const cleanTagsState = () => ({
+  all: [],
+  valid: [],
+  invalid: [],
+  duplicate: []
+})
+
+// --- Props ---
+
+const props = makePropsConfigurable(
+  sortKeys({
+    ...idProps,
+    ...modelProps,
+    ...formControlProps,
+    ...formSizeProps,
+    ...formStateProps,
+    addButtonText: makeProp(PROP_TYPE_STRING, 'Add'),
+    addButtonVariant: makeProp(PROP_TYPE_STRING, 'outline-secondary'),
+    // Enable change event triggering tag addition
+    // Handy if using <select> as the input
+    addOnChange: makeProp(PROP_TYPE_BOOLEAN, false),
+    duplicateTagText: makeProp(PROP_TYPE_STRING, 'Duplicate tag(s)'),
+    feedbackAriaLive: makeProp(PROP_TYPE_STRING, 'assertive'),
+    // Disable the input focus behavior when clicking
+    // on element matching the selector (or selectors)
+    ignoreInputFocusSelector: makeProp(PROP_TYPE_ARRAY_STRING, DEFAULT_INPUT_FOCUS_SELECTOR),
+    // Additional attributes to add to the input element
+    inputAttrs: makeProp(PROP_TYPE_OBJECT, {}),
+    inputClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    inputId: makeProp(PROP_TYPE_STRING),
+    inputType: makeProp(PROP_TYPE_STRING, 'text', value => {
+      return arrayIncludes(TYPES, value)
+    }),
+    invalidTagText: makeProp(PROP_TYPE_STRING, 'Invalid tag(s)'),
+    limit: makeProp(PROP_TYPE_NUMBER),
+    limitTagsText: makeProp(PROP_TYPE_STRING, 'Tag limit reached'),
+    // Disable ENTER key from triggering tag addition
+    noAddOnEnter: makeProp(PROP_TYPE_BOOLEAN, false),
+    // Disable the focus ring on the root element
+    noOuterFocus: makeProp(PROP_TYPE_BOOLEAN, false),
+    noTagRemove: makeProp(PROP_TYPE_BOOLEAN, false),
+    placeholder: makeProp(PROP_TYPE_STRING, 'Add tag...'),
+    // Enable deleting last tag in list when CODE_BACKSPACE is
+    // pressed and input is empty
+    removeOnDelete: makeProp(PROP_TYPE_BOOLEAN, false),
+    // Character (or characters) that trigger adding tags
+    separator: makeProp(PROP_TYPE_ARRAY_STRING),
+    tagClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    tagPills: makeProp(PROP_TYPE_BOOLEAN, false),
+    tagRemoveLabel: makeProp(PROP_TYPE_STRING, 'Remove tag'),
+    tagRemovedLabel: makeProp(PROP_TYPE_STRING, 'Tag removed'),
+    tagValidator: makeProp(PROP_TYPE_FUNCTION),
+    tagVariant: makeProp(PROP_TYPE_STRING, 'secondary')
+  }),
+  NAME_FORM_TAGS
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BFormTags = /*#__PURE__*/ extend({
+  name: NAME_FORM_TAGS,
+  mixins: [
+    listenersMixin,
+    idMixin,
+    modelMixin,
+    formControlMixin,
+    formSizeMixin,
+    formStateMixin,
+    normalizeSlotMixin
+  ],
+  props,
+  data() {
+    return {
+      hasFocus: false,
+      newTag: '',
+      tags: [],
+      // Tags that were removed
+      removedTags: [],
+      // Populated when tags are parsed
+      tagsState: cleanTagsState(),
+      focusState: null
+    }
+  },
+  computed: {
+    computedInputId() {
+      return this.inputId || this.safeId('__input__')
+    },
+    computedInputType() {
+      // We only allow certain types
+      return arrayIncludes(TYPES, this.inputType) ? this.inputType : 'text'
+    },
+    computedInputAttrs() {
+      const { disabled, form } = this
+
+      return {
+        // Merge in user supplied attributes
+        ...this.inputAttrs,
+        // Must have attributes
+        id: this.computedInputId,
+        value: this.newTag,
+        disabled,
+        form
+      }
+    },
+    computedInputHandlers() {
+      return {
+        ...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
+      }
+    },
+    computedSeparator() {
+      // Merge the array into a string
+      return concat(this.separator)
+        .filter(isString)
+        .filter(identity)
+        .join('')
+    },
+    computedSeparatorRegExp() {
+      // We use a computed prop here to precompile the RegExp
+      // The RegExp is a character class RE in the form of `/[abc]+/`
+      // where a, b, and c are the valid separator characters
+      // -> `tags = str.split(/[abc]+/).filter(t => t)`
+      const separator = this.computedSeparator
+      return separator ? new RegExp(`[${escapeRegExpChars(separator)}]+`) : null
+    },
+    computedJoiner() {
+      // When tag(s) are invalid or duplicate, we leave them
+      // in the input so that the user can see them
+      // If there are more than one tag in the input, we use the
+      // first separator character as the separator in the input
+      // We append a space if the first separator is not a space
+      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
+      // be added, then the 'Add' button should be enabled
+      const newTag = trim(this.newTag)
+      return (
+        newTag === '' ||
+        !this.splitTags(newTag).some(t => !arrayIncludes(this.tags, t) && this.validateTag(t))
+      )
+    },
+    duplicateTags() {
+      return this.tagsState.duplicate
+    },
+    hasDuplicateTags() {
+      return this.duplicateTags.length > 0
+    },
+    invalidTags() {
+      return this.tagsState.invalid
+    },
+    hasInvalidTags() {
+      return this.invalidTags.length > 0
+    },
+    isLimitReached() {
+      const { limit } = this
+      return isNumber(limit) && limit >= 0 && this.tags.length >= limit
+    }
+  },
+  watch: {
+    [MODEL_PROP_NAME](newValue) {
+      this.tags = cleanTags(newValue)
+    },
+    tags(newValue, oldValue) {
+      // Update the `v-model` (if it differs from the value prop)
+      if (!looseEqual(newValue, this[MODEL_PROP_NAME])) {
+        this.$emit(MODEL_EVENT_NAME, newValue)
+      }
+      if (!looseEqual(newValue, oldValue)) {
+        newValue = concat(newValue).filter(identity)
+        oldValue = concat(oldValue).filter(identity)
+        this.removedTags = oldValue.filter(old => !arrayIncludes(newValue, old))
+      }
+    },
+    tagsState(newValue, oldValue) {
+      // Emit a tag-state event when the `tagsState` object changes
+      if (!looseEqual(newValue, oldValue)) {
+        this.$emit(EVENT_NAME_TAG_STATE, newValue.valid, newValue.invalid, newValue.duplicate)
+      }
+    }
+  },
+  created() {
+    // We do this in created to make sure an input event emits
+    // if the cleaned tags are not equal to the value prop
+    this.tags = cleanTags(this[MODEL_PROP_NAME])
+  },
+  mounted() {
+    // Listen for form reset events, to reset the tags input
+    const $form = closest('form', this.$el)
+    if ($form) {
+      eventOn($form, 'reset', this.reset, EVENT_OPTIONS_PASSIVE)
+    }
+  },
+  beforeDestroy() {
+    const $form = closest('form', this.$el)
+    if ($form) {
+      eventOff($form, 'reset', this.reset, EVENT_OPTIONS_PASSIVE)
+    }
+  },
+  methods: {
+    addTag(newTag) {
+      newTag = isString(newTag) ? newTag : this.newTag
+      /* istanbul ignore next */
+      if (this.disabled || trim(newTag) === '' || this.isLimitReached) {
+        // Early exit
+        return
+      }
+      const parsed = this.parseTags(newTag)
+      // Add any new tags to the `tags` array, or if the
+      // array of `allTags` is empty, we clear the input
+      if (parsed.valid.length > 0 || parsed.all.length === 0) {
+        // Clear the user input element (and leave in any invalid/duplicate tag(s)
+        /* istanbul ignore if: full testing to be added later */
+        if (matches(this.getInput(), 'select')) {
+          // The following is needed to properly
+          // work with `<select>` elements
+          this.newTag = ''
+        } else {
+          const invalidAndDuplicates = [...parsed.invalid, ...parsed.duplicate]
+          this.newTag = parsed.all
+            .filter(tag => arrayIncludes(invalidAndDuplicates, tag))
+            .join(this.computedJoiner)
+            .concat(invalidAndDuplicates.length > 0 ? this.computedJoiner.charAt(0) : '')
+        }
+      }
+      if (parsed.valid.length > 0) {
+        // We add the new tags in one atomic operation
+        // to trigger reactivity once (instead of once per tag)
+        // We do this after we update the new tag input value
+        // `concat()` can be faster than array spread, when both args are arrays
+        this.tags = concat(this.tags, parsed.valid)
+      }
+      this.tagsState = parsed
+      // Attempt to re-focus the input (specifically for when using the Add
+      // button, as the button disappears after successfully adding a tag
+      this.focus()
+    },
+    removeTag(tag) {
+      /* istanbul ignore next */
+      if (this.disabled) {
+        return
+      }
+      // TODO:
+      //   Add `onRemoveTag(tag)` user method, which if returns `false`
+      //   will prevent the tag from being removed (i.e. confirmation)
+      //   Or emit cancelable `BvEvent`
+      this.tags = this.tags.filter(t => t !== tag)
+    },
+    reset() {
+      this.newTag = ''
+      this.tags = []
+
+      this.$nextTick(() => {
+        this.removedTags = []
+        this.tagsState = cleanTagsState()
+      })
+    },
+    // --- Input element event handlers ---
+    onInputInput(event) {
+      /* istanbul ignore next: hard to test composition events */
+      if (this.disabled || (isEvent(event) && event.target.composing)) {
+        // `event.target.composing` is set by Vue (`v-model` directive)
+        // https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/directives/model.js
+        return
+      }
+      let newTag = processEventValue(event)
+      const separatorRe = this.computedSeparatorRegExp
+      if (this.newTag !== newTag) {
+        this.newTag = newTag
+      }
+      // We ignore leading whitespace for the following
+      newTag = trimLeft(newTag)
+      if (separatorRe && separatorRe.test(newTag.slice(-1))) {
+        // A trailing separator character was entered, so add the tag(s)
+        // Note: More than one tag on input event is possible via copy/paste
+        this.addTag()
+      } else {
+        // Validate (parse tags) on input event
+        this.tagsState = newTag === '' ? cleanTagsState() : this.parseTags(newTag)
+      }
+    },
+    onInputChange(event) {
+      // Change is triggered on `<input>` blur, or `<select>` selected
+      // This event is opt-in
+      if (!this.disabled && this.addOnChange) {
+        const newTag = processEventValue(event)
+        /* istanbul ignore next */
+        if (this.newTag !== newTag) {
+          this.newTag = newTag
+        }
+        this.addTag()
+      }
+    },
+    onInputKeydown(event) {
+      // Early exit
+      /* istanbul ignore next */
+      if (this.disabled || !isEvent(event)) {
+        return
+      }
+      const { keyCode } = event
+      const value = event.target.value || ''
+      /* istanbul ignore else: testing to be added later */
+      if (!this.noAddOnEnter && keyCode === CODE_ENTER) {
+        // Attempt to add the tag when user presses enter
+        stopEvent(event, { propagation: false })
+        this.addTag()
+      } else if (
+        this.removeOnDelete &&
+        (keyCode === CODE_BACKSPACE || keyCode === CODE_DELETE) &&
+        value === ''
+      ) {
+        // Remove the last tag if the user pressed backspace/delete and the input is empty
+        stopEvent(event, { propagation: false })
+        this.tags = this.tags.slice(0, -1)
+      }
+    },
+    // --- Wrapper event handlers ---
+    onClick(event) {
+      const { computeIgnoreInputFocusSelector: ignoreFocusSelector } = this
+      if (!ignoreFocusSelector || !closest(ignoreFocusSelector, event.target, true)) {
+        this.$nextTick(() => {
+          this.focus()
+        })
+      }
+    },
+    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(event) {
+      this.hasFocus = false
+      this.$emit(EVENT_NAME_FOCUSOUT, event)
+    },
+    handleAutofocus() {
+      this.$nextTick(() => {
+        requestAF(() => {
+          if (this.autofocus) {
+            this.focus()
+          }
+        })
+      })
+    },
+    // --- Public methods ---
+    focus() {
+      if (!this.disabled) {
+        attemptFocus(this.getInput())
+      }
+    },
+    blur() {
+      if (!this.disabled) {
+        attemptBlur(this.getInput())
+      }
+    },
+    // --- Private methods ---
+    splitTags(newTag) {
+      // Split the input into an array of raw tags
+      newTag = toString(newTag)
+      const separatorRe = this.computedSeparatorRegExp
+      // Split the tag(s) via the optional separator
+      // Normally only a single tag is provided, but copy/paste
+      // can enter multiple tags in a single operation
+      return (separatorRe ? newTag.split(separatorRe) : [newTag]).map(trim).filter(identity)
+    },
+    parseTags(newTag) {
+      // Takes `newTag` value and parses it into `validTags`,
+      // `invalidTags`, and duplicate tags as an object
+      // Split the input into raw tags
+      const tags = this.splitTags(newTag)
+      // Base results
+      const parsed = {
+        all: tags,
+        valid: [],
+        invalid: [],
+        duplicate: []
+      }
+      // Parse the unique tags
+      tags.forEach(tag => {
+        if (arrayIncludes(this.tags, tag) || arrayIncludes(parsed.valid, tag)) {
+          // Unique duplicate tags
+          if (!arrayIncludes(parsed.duplicate, tag)) {
+            parsed.duplicate.push(tag)
+          }
+        } else if (this.validateTag(tag)) {
+          // We only add unique/valid tags
+          parsed.valid.push(tag)
+        } else {
+          // Unique invalid tags
+          if (!arrayIncludes(parsed.invalid, tag)) {
+            parsed.invalid.push(tag)
+          }
+        }
+      })
+      return parsed
+    },
+    validateTag(tag) {
+      const { tagValidator } = this
+      return hasPropFunction(tagValidator) ? tagValidator(tag) : true
+    },
+    getInput() {
+      // Returns the input element reference (or null if not found)
+      // We need to escape `computedInputId` since it can be user-provided
+      return select(`#${cssEscape(this.computedInputId)}`, this.$el)
+    },
+    // Default User Interface render
+    defaultRender({
+      addButtonText,
+      addButtonVariant,
+      addTag,
+      disableAddButton,
+      disabled,
+      duplicateTagText,
+      inputAttrs,
+      inputClass,
+      inputHandlers,
+      inputType,
+      invalidTagText,
+      isDuplicate,
+      isInvalid,
+      isLimitReached,
+      limitTagsText,
+      noTagRemove,
+      placeholder,
+      removeTag,
+      tagClass,
+      tagPills,
+      tagRemoveLabel,
+      tagVariant,
+      tags
+    }) {
+      const h = this.$createElement
+
+      // Make the list of tags
+      const $tags = tags.map(tag => {
+        tag = toString(tag)
+
+        return h(
+          BFormTag,
+          {
+            class: tagClass,
+            // `BFormTag` will auto generate an ID
+            // so we do not need to set the ID prop
+            props: {
+              disabled,
+              noRemove: noTagRemove,
+              pill: tagPills,
+              removeLabel: tagRemoveLabel,
+              tag: 'li',
+              title: tag,
+              variant: tagVariant
+            },
+            on: { remove: () => removeTag(tag) },
+            key: `tags_${tag}`
+          },
+          tag
+        )
+      })
+
+      // Feedback IDs if needed
+      const invalidFeedbackId =
+        invalidTagText && isInvalid ? this.safeId('__invalid_feedback__') : null
+      const duplicateFeedbackId =
+        duplicateTagText && isDuplicate ? this.safeId('__duplicate_feedback__') : null
+      const limitFeedbackId =
+        limitTagsText && isLimitReached ? this.safeId('__limit_feedback__') : null
+
+      // Compute the `aria-describedby` attribute value
+      const ariaDescribedby = [
+        inputAttrs['aria-describedby'],
+        invalidFeedbackId,
+        duplicateFeedbackId,
+        limitFeedbackId
+      ]
+        .filter(identity)
+        .join(' ')
+
+      // Input
+      const $input = h('input', {
+        staticClass: 'b-form-tags-input w-100 flex-grow-1 p-0 m-0 bg-transparent border-0',
+        class: inputClass,
+        style: { outline: 0, minWidth: '5rem' },
+        attrs: {
+          ...inputAttrs,
+          'aria-describedby': ariaDescribedby || null,
+          type: inputType,
+          placeholder: placeholder || null
+        },
+        domProps: { value: inputAttrs.value },
+        on: inputHandlers,
+        // Directive needed to get `event.target.composing` set (if needed)
+        directives: [{ name: 'model', value: inputAttrs.value }],
+        ref: 'input'
+      })
+
+      // Add button
+      const $button = h(
+        BButton,
+        {
+          staticClass: 'b-form-tags-button py-0',
+          class: {
+            // Only show the button if the tag can be added
+            // We use the `invisible` class instead of not rendering
+            // the button, so that we maintain layout to prevent
+            // the user input from jumping around
+            invisible: disableAddButton
+          },
+          style: { fontSize: '90%' },
+          props: {
+            disabled: disableAddButton || isLimitReached,
+            variant: addButtonVariant
+          },
+          on: { click: () => addTag() },
+          ref: 'button'
+        },
+        [this.normalizeSlot(SLOT_NAME_ADD_BUTTON_TEXT) || addButtonText]
+      )
+
+      // ID of the tags + input `<ul>` list
+      // Note we could concatenate `inputAttrs.id` with '__tag_list__'
+      // but `inputId` may be `null` until after mount
+      // `safeId()` returns `null`, if no user provided ID,
+      // until after mount when a unique ID is generated
+      const tagListId = this.safeId('__tag_list__')
+
+      const $field = h(
+        'li',
+        {
+          staticClass: 'b-form-tags-field flex-grow-1',
+          attrs: {
+            role: 'none',
+            'aria-live': 'off',
+            'aria-controls': tagListId
+          },
+          key: 'tags_field'
+        },
+        [
+          h(
+            'div',
+            {
+              staticClass: 'd-flex',
+              attrs: { role: 'group' }
+            },
+            [$input, $button]
+          )
+        ]
+      )
+
+      // Wrap in an unordered list element (we use a list for accessibility)
+      const $ul = h(
+        'ul',
+        {
+          staticClass: 'b-form-tags-list list-unstyled mb-0 d-flex flex-wrap align-items-center',
+          attrs: { id: tagListId },
+          key: 'tags_list'
+        },
+        [$tags, $field]
+      )
+
+      // Assemble the feedback
+      let $feedback = h()
+      if (invalidTagText || duplicateTagText || limitTagsText) {
+        // Add an aria live region for the invalid/duplicate tag
+        // messages if the user has not disabled the messages
+        const { feedbackAriaLive: ariaLive, computedJoiner: joiner } = this
+
+        // Invalid tag feedback if needed (error)
+        let $invalid = h()
+        if (invalidFeedbackId) {
+          $invalid = h(
+            BFormInvalidFeedback,
+            {
+              props: {
+                id: invalidFeedbackId,
+                ariaLive,
+                forceShow: true
+              },
+              key: 'tags_invalid_feedback'
+            },
+            [this.invalidTagText, ': ', this.invalidTags.join(joiner)]
+          )
+        }
+
+        // Duplicate tag feedback if needed (warning, not error)
+        let $duplicate = h()
+        if (duplicateFeedbackId) {
+          $duplicate = h(
+            BFormText,
+            {
+              props: {
+                id: duplicateFeedbackId,
+                ariaLive
+              },
+              key: 'tags_duplicate_feedback'
+            },
+            [this.duplicateTagText, ': ', this.duplicateTags.join(joiner)]
+          )
+        }
+
+        // Limit tags feedback if needed (warning, not error)
+        let $limit = h()
+        if (limitFeedbackId) {
+          $limit = h(
+            BFormText,
+            {
+              props: {
+                id: limitFeedbackId,
+                ariaLive
+              },
+              key: 'tags_limit_feedback'
+            },
+            [limitTagsText]
+          )
+        }
+
+        $feedback = h(
+          'div',
+          {
+            attrs: {
+              'aria-live': 'polite',
+              'aria-atomic': 'true'
+            },
+            key: 'tags_feedback'
+          },
+          [$invalid, $duplicate, $limit]
+        )
+      }
+
+      // Return the content
+      return [$ul, $feedback]
+    }
+  },
+  render(h) {
+    const { name, disabled, required, form, tags, computedInputId, hasFocus, noOuterFocus } = this
+
+    // Scoped slot properties
+    const scope = {
+      // Array of tags (shallow copy to prevent mutations)
+      tags: tags.slice(),
+      // <input> v-bind:inputAttrs
+      inputAttrs: this.computedInputAttrs,
+      // We don't include this in the attrs, as users may want to override this
+      inputType: this.computedInputType,
+      // <input> v-on:inputHandlers
+      inputHandlers: this.computedInputHandlers,
+      // Methods
+      removeTag: this.removeTag,
+      addTag: this.addTag,
+      reset: this.reset,
+      // <input> :id="inputId"
+      inputId: computedInputId,
+      // Invalid/Duplicate state information
+      isInvalid: this.hasInvalidTags,
+      invalidTags: this.invalidTags.slice(),
+      isDuplicate: this.hasDuplicateTags,
+      duplicateTags: this.duplicateTags.slice(),
+      isLimitReached: this.isLimitReached,
+      // If the 'Add' button should be disabled
+      disableAddButton: this.disableAddButton,
+      // Pass-through props
+      ...pick(this.$props, [
+        'addButtonText',
+        'addButtonVariant',
+        'disabled',
+        'duplicateTagText',
+        'form',
+        'inputClass',
+        'invalidTagText',
+        'limit',
+        'limitTagsText',
+        'noTagRemove',
+        'placeholder',
+        'required',
+        'separator',
+        'size',
+        'state',
+        'tagClass',
+        'tagPills',
+        'tagRemoveLabel',
+        'tagVariant'
+      ])
+    }
+
+    // Generate the user interface
+    const $content = this.normalizeSlot(SLOT_NAME_DEFAULT, scope) || this.defaultRender(scope)
+
+    // Generate the `aria-live` region for the current value(s)
+    const $output = h(
+      'output',
+      {
+        staticClass: 'sr-only',
+        attrs: {
+          id: this.safeId('__selected_tags__'),
+          role: 'status',
+          for: computedInputId,
+          'aria-live': hasFocus ? 'polite' : 'off',
+          'aria-atomic': 'true',
+          'aria-relevant': 'additions text'
+        }
+      },
+      this.tags.join(', ')
+    )
+
+    // Removed tag live region
+    const $removed = h(
+      'div',
+      {
+        staticClass: 'sr-only',
+        attrs: {
+          id: this.safeId('__removed_tags__'),
+          role: 'status',
+          'aria-live': hasFocus ? 'assertive' : 'off',
+          'aria-atomic': 'true'
+        }
+      },
+      this.removedTags.length > 0 ? `(${this.tagRemovedLabel}) ${this.removedTags.join(', ')}` : ''
+    )
+
+    // Add hidden inputs for form submission
+    let $hidden = h()
+    if (name && !disabled) {
+      // We add hidden inputs for each tag if a name is provided
+      // When there are currently no tags, a visually hidden input
+      // with empty value is rendered for proper required handling
+      const hasTags = tags.length > 0
+      $hidden = (hasTags ? tags : ['']).map(tag => {
+        return h('input', {
+          class: { 'sr-only': !hasTags },
+          attrs: {
+            type: hasTags ? 'hidden' : 'text',
+            value: tag,
+            required,
+            name,
+            form
+          },
+          key: `tag_input_${tag}`
+        })
+      })
+    }
+
+    // Return the rendered output
+    return h(
+      'div',
+      {
+        staticClass: 'b-form-tags form-control h-auto',
+        class: [
+          {
+            focus: hasFocus && !noOuterFocus && !disabled,
+            disabled
+          },
+          this.sizeFormClass,
+          this.stateClass
+        ],
+        attrs: {
+          id: this.safeId(),
+          role: 'group',
+          tabindex: disabled || noOuterFocus ? null : '-1',
+          'aria-describedby': this.safeId('__selected_tags__')
+        },
+        on: {
+          click: this.onClick,
+          focusin: this.onFocusin,
+          focusout: this.onFocusout
+        }
+      },
+      [$output, $removed, $content, $hidden]
+    )
+  }
+})