Autocomplete popover

docs-src/pages/UiAutocomplete.vue

@@ -118,6 +118,20 @@
 
                 placeholder="You can't interact with this"
             ></ui-autocomplete>
+
+            <h4 class="page__demo-title">Disabled</h4>
+
+            <ui-button :disabled="addedGrannies" @click="$refs.modal.open()">
+              In a modal
+            </ui-button>
+
+            <ui-modal ref="modal">
+                <ui-autocomplete
+                    v-model="autocomplete8"
+                    label="Favourite Month"
+                    :suggestions="months"
+                ></ui-autocomplete>
+            </ui-modal>
         </div>
 
         <h3 class="page__section-title">API</h3>
@@ -606,6 +620,7 @@ import UiAutocomplete from '@/UiAutocomplete.vue';
 import UiButton from '@/UiButton.vue';
 import UiTab from '@/UiTab.vue';
 import UiTabs from '@/UiTabs.vue';
+import UiModal from '@/UiModal.vue';
 
 const months = [
     'January',
@@ -666,6 +681,7 @@ const grannies = [
 export default {
     components: {
         UiAutocomplete,
+        UiModal,
         UiButton,
         UiTab,
         UiTabs
@@ -683,7 +699,8 @@ export default {
             autocomplete4Touched: false,
             autocomplete5: '',
             autocomplete6: '',
-            autocomplete7: ''
+            autocomplete7: '',
+            autocomplete8: ''
         };
     },
 

src/UiAutocomplete.vue

@@ -7,7 +7,7 @@
     </div>
 
     <div class="ui-autocomplete__content">
-      <label class="ui-autocomplete__label">
+      <div class="ui-autocomplete__label">
         <div
           v-if="label || $slots.default"
           class="ui-autocomplete__label-text"
@@ -51,26 +51,39 @@
           @keydown.up.prevent="highlightSuggestion(highlightedIndex - 1)"
         />
 
-        <ul v-show="showDropdown" class="ui-autocomplete__suggestions">
-          <ui-autocomplete-suggestion
-            v-for="(suggestion, index) in matchingSuggestions"
-            ref="suggestions"
-            :key="index"
-            :highlighted="highlightedIndex === index"
-            :keys="keys"
-            :suggestion="suggestion"
-            :type="type"
-            @click="selectSuggestion(suggestion)"
-          >
-            <slot
-              name="suggestion"
+        <ui-popover
+          ref="dropdown"
+          class="ui-autocomplete__dropdown"
+          :close-on-scroll="false"
+          :constrain-to-scroll-parent="false"
+          :close-on-external-click="false"
+          :disabled="disabled"
+          open-on="manual"
+          @close="onClose"
+          @open="onOpen"
+          @reveal="onReveal"
+        >
+          <ul ref="suggestionsList" class="ui-autocomplete__suggestions">
+            <ui-autocomplete-suggestion
+              v-for="(suggestion, index) in matchingSuggestions"
+              ref="suggestions"
+              :key="index"
               :highlighted="highlightedIndex === index"
-              :index="index"
+              :keys="keys"
               :suggestion="suggestion"
-            ></slot>
-          </ui-autocomplete-suggestion>
-        </ul>
-      </label>
+              :type="type"
+              @click="selectSuggestion(suggestion)"
+            >
+              <slot
+                name="suggestion"
+                :highlighted="highlightedIndex === index"
+                :index="index"
+                :suggestion="suggestion"
+              ></slot>
+            </ui-autocomplete-suggestion>
+          </ul>
+        </ui-popover>
+      </div>
 
       <div v-if="hasFeedback" class="ui-autocomplete__feedback">
         <div v-if="showError" class="ui-autocomplete__feedback-text">
@@ -87,7 +100,9 @@
 
 <script>
 import autofocus from "./directives/autofocus";
+import RespondsToExternalClick from "./mixins/RespondsToExternalClick";
 import UiAutocompleteSuggestion from "./UiAutocompleteSuggestion.vue";
+import UiPopover from "./UiPopover.vue";
 import UiIcon from "./UiIcon.vue";
 
 import fuzzysearch from "fuzzysearch";
@@ -98,12 +113,15 @@ export default {
   components: {
     UiAutocompleteSuggestion,
     UiIcon,
+    UiPopover,
   },
 
   directives: {
     autofocus,
   },
 
+  mixins: [RespondsToExternalClick],
+
   props: {
     name: String,
     placeholder: String,
@@ -210,7 +228,6 @@ export default {
       initialValue: this.modelValue,
       isActive: false,
       isTouched: false,
-      showDropdown: false,
       highlightedIndex: -1,
     };
   },
@@ -293,6 +310,14 @@ export default {
     },
   },
 
+  mounted() {
+    this.addExternalClickListener(this.$el, this.onExternalClick);
+  },
+
+  beforeUnmount() {
+    this.removeExternalClickListener();
+  },
+
   created() {
     // Normalize the value to an empty string if it's null
     if (this.modelValue === null) {
@@ -301,14 +326,6 @@ export default {
     }
   },
 
-  mounted() {
-    document.addEventListener("click", this.onExternalClick);
-  },
-
-  beforeUnmount() {
-    document.removeEventListener("click", this.onExternalClick);
-  },
-
   methods: {
     defaultFilter(suggestion, query) {
       const text = suggestion[this.keys.label] || suggestion;
@@ -365,37 +382,57 @@ export default {
     },
 
     selectHighlighted(index, e) {
-      if (this.showDropdown && this.$refs.suggestions.length > 0) {
+      if (this.$refs.suggestions.length > 0) {
         e.preventDefault();
         this.selectSuggestion(this.$refs.suggestions[index].suggestion);
       }
     },
 
+    scrollSuggestionIntoView(suggestionEl) {
+      if (suggestionEl) {
+        suggestionEl.scrollIntoView({ block: "nearest" });
+      }
+    },
+
     focus() {
       this.$refs.input.focus();
     },
 
     openDropdown() {
-      if (!this.showDropdown) {
-        this.showDropdown = true;
-        this.$emit("dropdown-open");
+      if (this.disabled) {
+        return;
       }
+
+      this.$refs.dropdown.open();
     },
 
     closeDropdown() {
-      if (this.showDropdown) {
-        this.$nextTick(() => {
-          this.showDropdown = false;
-          this.highlightedIndex = -1;
-          this.$emit("dropdown-close");
-        });
-      }
+      this.$refs.dropdown.close();
     },
 
     updateValue(value) {
       this.$emit("update:modelValue", value);
     },
 
+    onOpen() {
+      this.$refs.dropdown.$el.style.width = this.$refs.input.getBoundingClientRect().width + "px";
+
+      this.$nextTick(() => {
+        this.scrollSuggestionIntoView(this.$refs.suggestionsList.querySelector(".is-highlighted"));
+      });
+
+      this.$emit("dropdown-open");
+    },
+
+    onReveal() {
+      this.focus();
+    },
+
+    onClose() {
+      this.highlightedIndex = -1;
+      this.$emit("dropdown-close");
+    },
+
     onFocus(e) {
       this.isActive = true;
       this.$emit("focus", e);
@@ -415,8 +452,8 @@ export default {
       }
     },
 
-    onExternalClick(e) {
-      if (!this.$el.contains(e.target) && this.showDropdown) {
+    onExternalClick() {
+      if (this.$refs.dropdown.isOpen()) {
         this.closeDropdown();
       }
     },