From 7ac2878cb9b9b7165c8289e03a8ccd005b059c90 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 9 Jan 2020 13:57:54 -0400
Subject: [PATCH 1/3] chore(docs): add example of using dropdown in form-tags
 custom rendering

---
 src/components/form-tags/README.md | 128 ++++++++++++++++++++++++-----
 1 file changed, 107 insertions(+), 21 deletions(-)

diff --git a/src/components/form-tags/README.md b/src/components/form-tags/README.md
index a941c6c2907..326f749761f 100644
--- a/src/components/form-tags/README.md
+++ b/src/components/form-tags/README.md
@@ -501,27 +501,27 @@ of tags:
       <!-- prop `add-on-change` is needed to enable adding tags vie the `change` event -->
       <b-form-tags v-model="value" size="lg" add-on-change no-outer-focus class="mb-2">
         <template v-slot="{ tags, inputAttrs, inputHandlers, disabled, removeTag }">
-        <ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
-          <li v-for="tag in tags" :key="tag" class="list-inline-item">
-            <b-form-tag
-              @remove="removeTag(tag)"
-              :title="tag"
-              :disabled="disabled"
-              variant="info"
-            >{{ tag }}</b-form-tag>
-          </li>
-        </ul>
-        <b-form-select
-          v-bind="inputAttrs"
-          v-on="inputHandlers"
-          :disabled="disabled || availableOptions.length === 0"
-          :options="availableOptions"
-        >
-          <template v-slot:first>
-            <!-- This is required to prevent bugs with Safari -->
-            <option disabled value="">Choose a tag...</option>
-          </template>
-        </b-form-select>
+          <ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
+            <li v-for="tag in tags" :key="tag" class="list-inline-item">
+              <b-form-tag
+                @remove="removeTag(tag)"
+                :title="tag"
+                :disabled="disabled"
+                variant="info"
+              >{{ tag }}</b-form-tag>
+            </li>
+          </ul>
+          <b-form-select
+            v-bind="inputAttrs"
+            v-on="inputHandlers"
+            :disabled="disabled || availableOptions.length === 0"
+            :options="availableOptions"
+          >
+            <template v-slot:first>
+              <!-- This is required to prevent bugs with Safari -->
+              <option disabled value="">Choose a tag...</option>
+            </template>
+          </b-form-select>
         </template>
       </b-form-tags>
     </b-form-group>
@@ -657,6 +657,92 @@ default slot's scope.
 <!-- form-tags-custom-components-advanced.vue -->
 ```
 
+The following is an example of using the `<b-dropdown>` component for choosing or searching from a
+pre-defined set of tags:
+
+```html
+<template>
+  <div>
+    <b-form-group label="Tagged input using dropdown">
+      <b-form-tags v-model="value" size="lg" no-outer-focus class="mb-2">
+        <template v-slot="{ tags, disabled, addTag, removeTag }">
+          <ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
+            <li v-for="tag in tags" :key="tag" class="list-inline-item">
+              <b-form-tag
+                @remove="removeTag(tag)"
+                :title="tag"
+                :disabled="disabled"
+                variant="info"
+              >{{ tag }}</b-form-tag>
+            </li>
+          </ul>
+          <b-dropdown size="sm" variant="outline-secondary" block menu-class="w-100">
+            <template v-slot:button-content>
+               <b-icon icon="tag-fill"></b-icon> Choose tags
+            </template>
+            <b-dropdown-form @submit.prevent>
+              <b-form-group
+                label-for="tag-search-input"
+                label="Search tags"
+                label-cols-md="auto"
+                class="mb-0"
+                label-size="sm"
+                :disabled="disabled"
+              >
+                <b-form-input
+                  v-model="search"
+                  id="tag-search-input"
+                  type="search"
+                  size="sm"
+                  autocomplete="off"
+                 ></b-form-input>
+              </b-form-group>
+            </b-dropdown-form>
+            <b-dropdown-divider></b-dropdown-divider>
+            <b-dropdown-item-button
+              v-for="opt in searchResults"
+              :key="opt"
+              @click="addTag(opt); search = ''"
+            >
+              {{ opt }}
+            </b-dropdown-item-button>
+          </b-dropdown>
+        </template>
+      </b-form-tags>
+    </b-form-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        allOptions: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
+        search: '',
+        value: []
+      }
+    },
+    computed: {
+      searchResults() {
+        // Compute the search criteria
+        const criteria = this.search.trim().toLowerCase()
+        // Filter out already selected options
+        const options = this.allOptions.filter(opt => this.value.indexOf(opt) === -1)
+        if (criteria) {
+          // Show only options that match criteria
+          return options.filter(opt => opt.toLowerCase().indexOf(criteria) > -1);
+        } else {
+          // Show all options available
+          return options
+        }
+      }
+    }
+  }
+</script>
+
+<!-- b-form-tags-components-dropdown.vue -->
+```
+
 ### Creating wrapper components
 
 You can easily create a custom wrapper component with your preferred rendering style as follows:

From 76ee79c980d5d70575dfeaf0feca0e2d68dd7346 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 9 Jan 2020 14:41:04 -0400
Subject: [PATCH 2/3] Update README.md

---
 src/components/form-tags/README.md | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/form-tags/README.md b/src/components/form-tags/README.md
index 326f749761f..524d714d540 100644
--- a/src/components/form-tags/README.md
+++ b/src/components/form-tags/README.md
@@ -664,7 +664,7 @@ pre-defined set of tags:
 <template>
   <div>
     <b-form-group label="Tagged input using dropdown">
-      <b-form-tags v-model="value" size="lg" no-outer-focus class="mb-2">
+      <b-form-tags v-model="value" no-outer-focus class="mb-2">
         <template v-slot="{ tags, disabled, addTag, removeTag }">
           <ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
             <li v-for="tag in tags" :key="tag" class="list-inline-item">
@@ -687,6 +687,7 @@ pre-defined set of tags:
                 label-cols-md="auto"
                 class="mb-0"
                 label-size="sm"
+                :description="searchDesc"
                 :disabled="disabled"
               >
                 <b-form-input
@@ -706,6 +707,9 @@ pre-defined set of tags:
             >
               {{ opt }}
             </b-dropdown-item-button>
+            <b-dropdown-text v-if="searchResults.length == 0">
+              There are no tags available to select
+            </b-dropdown-text>
           </b-dropdown>
         </template>
       </b-form-tags>
@@ -723,9 +727,12 @@ pre-defined set of tags:
       }
     },
     computed: {
-      searchResults() {
+      criteria() {
         // Compute the search criteria
-        const criteria = this.search.trim().toLowerCase()
+        return this.search.trim().toLowerCase()
+      },
+      searchResults() {
+        const criteria = this.criteria
         // Filter out already selected options
         const options = this.allOptions.filter(opt => this.value.indexOf(opt) === -1)
         if (criteria) {
@@ -735,12 +742,19 @@ pre-defined set of tags:
           // Show all options available
           return options
         }
+      },
+      searchDesc() {
+        if (this.criteria && this.searchResults.length === 0) {
+          return 'There are no tags matching your search criteria' 
+        } else {
+          return ''
+        }
       }
     }
   }
 </script>
 
-<!-- b-form-tags-components-dropdown.vue -->
+<!-- b-form-tags-dropdown-example.vue -->
 ```
 
 ### Creating wrapper components

From cbcb924cb93e20b9ac32a6b237465de63cce3001 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 9 Jan 2020 20:45:38 +0100
Subject: [PATCH 3/3] Update README.md

---
 src/components/form-tags/README.md | 43 +++++++++++++++++-------------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/form-tags/README.md b/src/components/form-tags/README.md
index 524d714d540..9b4ba743c2a 100644
--- a/src/components/form-tags/README.md
+++ b/src/components/form-tags/README.md
@@ -532,13 +532,13 @@ of tags:
   export default {
     data() {
       return {
-        allOptions: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
+        options: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
         value: []
       }
     },
     computed: {
       availableOptions() {
-        return this.allOptions.filter(opt => this.value.indexOf(opt) === -1)
+        return this.options.filter(opt => this.value.indexOf(opt) === -1)
       }
     }
   }
@@ -676,11 +676,12 @@ pre-defined set of tags:
               >{{ tag }}</b-form-tag>
             </li>
           </ul>
+
           <b-dropdown size="sm" variant="outline-secondary" block menu-class="w-100">
             <template v-slot:button-content>
-               <b-icon icon="tag-fill"></b-icon> Choose tags
+              <b-icon icon="tag-fill"></b-icon> Choose tags
             </template>
-            <b-dropdown-form @submit.prevent>
+            <b-dropdown-form @submit.stop.prevent="() => {}">
               <b-form-group
                 label-for="tag-search-input"
                 label="Search tags"
@@ -701,13 +702,13 @@ pre-defined set of tags:
             </b-dropdown-form>
             <b-dropdown-divider></b-dropdown-divider>
             <b-dropdown-item-button
-              v-for="opt in searchResults"
-              :key="opt"
-              @click="addTag(opt); search = ''"
+              v-for="option in availableOptions"
+              :key="option"
+              @click="onOptionClick({ option, addTag })"
             >
-              {{ opt }}
+              {{ option }}
             </b-dropdown-item-button>
-            <b-dropdown-text v-if="searchResults.length == 0">
+            <b-dropdown-text v-if="availableOptions.length === 0">
               There are no tags available to select
             </b-dropdown-text>
           </b-dropdown>
@@ -721,7 +722,7 @@ pre-defined set of tags:
   export default {
     data() {
       return {
-        allOptions: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
+        options: ['Apple', 'Orange', 'Banana', 'Lime', 'Peach', 'Chocolate', 'Strawberry'],
         search: '',
         value: []
       }
@@ -731,24 +732,28 @@ pre-defined set of tags:
         // Compute the search criteria
         return this.search.trim().toLowerCase()
       },
-      searchResults() {
+      availableOptions() {
         const criteria = this.criteria
         // Filter out already selected options
-        const options = this.allOptions.filter(opt => this.value.indexOf(opt) === -1)
+        const options = this.options.filter(opt => this.value.indexOf(opt) === -1)
         if (criteria) {
           // Show only options that match criteria
           return options.filter(opt => opt.toLowerCase().indexOf(criteria) > -1);
-        } else {
-          // Show all options available
-          return options
         }
+        // Show all options available
+        return options
       },
       searchDesc() {
-        if (this.criteria && this.searchResults.length === 0) {
-          return 'There are no tags matching your search criteria' 
-        } else {
-          return ''
+        if (this.criteria && this.availableOptions.length === 0) {
+          return 'There are no tags matching your search criteria'
         }
+        return ''
+      }
+    },
+    methods: {
+      onOptionClick({ option, addTag }) {
+        addTag(option)
+        this.search = ''
       }
     }
   }