From 8ad623396d053b5e3cf51b201a9aa3b4962ed922 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 9 Sep 2020 15:19:57 +0200
Subject: [PATCH] fix(b-form-tags): ensure same height with or without tags

---
 src/components/form-tags/_form-tags.scss |  1 +
 src/components/form-tags/form-tags.js    | 71 ++++++++++++++----------
 2 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/src/components/form-tags/_form-tags.scss b/src/components/form-tags/_form-tags.scss
index dcf5382b441..6e76e3747e9 100644
--- a/src/components/form-tags/_form-tags.scss
+++ b/src/components/form-tags/_form-tags.scss
@@ -2,6 +2,7 @@
   .b-form-tags-list {
     margin-top: -0.25rem;
 
+    .b-from-tags-field,
     .b-form-tag {
       margin-top: 0.25rem;
     }
diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js
index db6ed187256..dd5cc60abea 100644
--- a/src/components/form-tags/form-tags.js
+++ b/src/components/form-tags/form-tags.js
@@ -572,7 +572,6 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
         return h(
           BFormTag,
           {
-            key: `li-tag__${tag}`,
             class: tagClass,
             props: {
               // `BFormTag` will auto generate an ID
@@ -584,7 +583,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
               pill: tagPills,
               removeLabel: tagRemoveLabel
             },
-            on: { remove: () => removeTag(tag) }
+            on: { remove: () => removeTag(tag) },
+            key: `tags_${tag}`
           },
           tag
         )
@@ -640,40 +640,52 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
             invisible: disableAddButton
           },
           style: { fontSize: '90%' },
-          props: { variant: addButtonVariant, disabled: disableAddButton || isLimitReached },
+          props: {
+            variant: addButtonVariant,
+            disabled: disableAddButton || isLimitReached
+          },
           on: { click: () => addTag() }
         },
         [this.normalizeSlot('add-button-text') || addButtonText]
       )
 
-      // ID of the tags+input `<ul>` list
-      // Note we could concatenate inputAttrs.id with `__TAG__LIST__`
-      // But note that the 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__')
+      // 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',
         {
-          key: '__li-input__',
-          staticClass: 'flex-grow-1',
+          staticClass: 'b-from-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])]
+        [
+          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',
         {
-          key: '_tags_list_',
           staticClass: 'b-form-tags-list list-unstyled mb-0 d-flex flex-wrap align-items-center',
-          attrs: { id: tagListId }
+          attrs: { id: tagListId },
+          key: 'tags_list'
         },
         [$tags, $field]
       )
@@ -691,8 +703,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
           $invalid = h(
             BFormInvalidFeedback,
             {
-              key: '_tags_invalid_feedback_',
-              props: { id: invalidFeedbackId, forceShow: true }
+              props: { id: invalidFeedbackId, forceShow: true },
+              key: 'tags_invalid_feedback'
             },
             [this.invalidTagText, ': ', this.invalidTags.join(joiner)]
           )
@@ -704,8 +716,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
           $duplicate = h(
             BFormText,
             {
-              key: '_tags_duplicate_feedback_',
-              props: { id: duplicateFeedbackId }
+              props: { id: duplicateFeedbackId },
+              key: 'tags_duplicate_feedback'
             },
             [this.duplicateTagText, ': ', this.duplicateTags.join(joiner)]
           )
@@ -717,8 +729,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
           $limit = h(
             BFormText,
             {
-              key: '_tags_limit_feedback_',
-              props: { id: limitFeedbackId }
+              props: { id: limitFeedbackId },
+              key: 'tags_limit_feedback'
             },
             [limitTagsText]
           )
@@ -727,8 +739,11 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
         $feedback = h(
           'div',
           {
-            key: '_tags_feedback_',
-            attrs: { 'aria-live': 'polite', 'aria-atomic': 'true' }
+            attrs: {
+              'aria-live': 'polite',
+              'aria-atomic': 'true'
+            },
+            key: 'tags_feedback'
           },
           [$invalid, $duplicate, $limit]
         )
@@ -789,7 +804,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
       {
         staticClass: 'sr-only',
         attrs: {
-          id: this.safeId('_selected-tags_'),
+          id: this.safeId('__selected_tags__'),
           role: 'status',
           for: this.computedInputId,
           'aria-live': this.hasFocus ? 'polite' : 'off',
@@ -806,7 +821,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
       {
         staticClass: 'sr-only',
         attrs: {
-          id: this.safeId('_removed-tags_'),
+          id: this.safeId('__removed_tags__'),
           role: 'status',
           'aria-live': this.hasFocus ? 'assertive' : 'off',
           'aria-atomic': 'true'
@@ -822,13 +837,13 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
       // for native submission of forms
       $hidden = this.tags.map(tag => {
         return h('input', {
-          key: tag,
           attrs: {
             type: 'hidden',
             value: tag,
             name: this.name,
             form: this.form || null
-          }
+          },
+          key: `tag_input_${tag}`
         })
       })
     }
@@ -849,7 +864,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
           id: this.safeId(),
           role: 'group',
           tabindex: this.disabled || this.noOuterFocus ? null : '-1',
-          'aria-describedby': this.safeId('_selected_')
+          'aria-describedby': this.safeId('__selected_tags__')
         },
         on: {
           click: this.onClick,