Fix overflowing selected of options

README.md

@@ -1,4 +1,5 @@
-# vue-select ![Current Release](https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square) ![Release Date](https://img.shields.io/github/release-date/sagalbot/vue-select?style=flat-square) ![Bundle Size](https://flat.badgen.net/bundlephobia/min/vue-select) ![Monthly Downloads](https://img.shields.io/npm/dm/vue-select.svg?style=flat-square) [![Coverage Status](https://coveralls.io/repos/github/sagalbot/vue-select/badge.svg?branch=master)](https://coveralls.io/github/sagalbot/vue-select?branch=master) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square)
+# @nextcloud/vue-select
+![Current Release](https://img.shields.io/github/release/nextcloud-deps/vue-select?style=flat-square) ![Release Date](https://img.shields.io/github/release-date/nextcloud-deps/vue-select?style=flat-square) ![Bundle Size](https://flat.badgen.net/bundlephobia/min/@nextcloud/vue-select) ![Monthly Downloads](https://img.shields.io/npm/dm/@nextcloud/vue-select?style=flat-square) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square)
 
 > **Everything you wish the HTML `<select>` element could do, wrapped up into a lightweight, zero
 > dependency, extensible Vue component.**

package.json

@@ -1,9 +1,12 @@
 {
-  "name": "vue-select",
-  "version": "3.20.2",
+  "name": "@nextcloud/vue-select",
+  "version": "3.23.0",
   "description": "Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.",
   "author": "Jeff Sagal <[email protected]>",
-  "homepage": "https://vue-select.org",
+  "contributors": [
+    "Christopher Ng <[email protected]>"
+  ],
+  "homepage": "https://github.com/nextcloud-deps/vue-select",
   "directories": {
     "doc": "docs",
     "test": "tests"
@@ -26,7 +29,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/sagalbot/vue-select.git"
+    "url": "https://github.com/nextcloud-deps/vue-select.git"
   },
   "peerDependencies": {
     "vue": "2.x"

src/components/Select.vue

@@ -17,7 +17,7 @@
     >
       <div ref="selectedOptions" class="vs__selected-options">
         <slot
-          v-for="option in selectedValue"
+          v-for="(option, index) in selectedValue"
           name="selected-option-container"
           :option="normalizeOptionForSlot(option)"
           :deselect="deselect"
@@ -39,7 +39,8 @@
               class="vs__deselect"
               :title="`Deselect ${getOptionLabel(option)}`"
               :aria-label="`Deselect ${getOptionLabel(option)}`"
-              @click="deselect(option)"
+              @mousedown.stop="deselect(option)"
+              @keydown.enter="keyboardDeselect(option, index)"
             >
               <component :is="childComponents.Deselect" />
             </button>
@@ -91,6 +92,7 @@
         v-append-to-body
         class="vs__dropdown-menu"
         role="listbox"
+        :aria-multiselectable="multiple"
         tabindex="-1"
         @mousedown.prevent="onMousedown"
         @mouseup="onMouseUp"
@@ -107,10 +109,11 @@
               isOptionDeselectable(option) && index === typeAheadPointer,
             'vs__dropdown-option--selected': isOptionSelected(option),
             'vs__dropdown-option--highlight': index === typeAheadPointer,
+            'vs__dropdown-option--kb-focus': hasKeyboardFocusBorder(index),
             'vs__dropdown-option--disabled': !selectable(option),
           }"
-          :aria-selected="index === typeAheadPointer ? true : null"
-          @mouseover="selectable(option) ? (typeAheadPointer = index) : null"
+          :aria-selected="optionAriaSelected(option)"
+          @mousemove="onMouseMove(option, index)"
           @click.prevent.stop="selectable(option) ? select(option) : null"
         >
           <slot name="option" v-bind="normalizeOptionForSlot(option)">
@@ -190,6 +193,15 @@ export default {
       },
     },
 
+    /**
+     * Sets the maximum number of options to display in the dropdown list
+     * @type {Number}
+     */
+    limit: {
+      type: Number,
+      default: null,
+    },
+
     /**
      * Disable the entire component.
      * @type {Boolean}
@@ -497,6 +509,16 @@ export default {
       },
     },
 
+    /**
+     * If false, the focused dropdown option will not be reset when filtered
+     * options change.
+     * @type {Boolean}
+     */
+    resetFocusOnOptionsChange: {
+      type: Boolean,
+      default: true,
+    },
+
     /**
      * When false, updating the options will not reset the selected value. Accepts
      * a `boolean` or `function` that returns a `boolean`. If defined as a function,
@@ -660,6 +682,15 @@ export default {
       },
     },
 
+    /**
+     * Display a visible border around dropdown options
+     * which have keyboard focus.
+     */
+    keyboardFocusBorder: {
+      type: Boolean,
+      default: false,
+    },
+
     /**
      * A unique identifier used to generate IDs in HTML.
      * Must be unique for every instance of the component.
@@ -675,6 +706,7 @@ export default {
       search: '',
       open: false,
       isComposing: false,
+      isKeyboardNavigation: false,
       pushedTags: [],
       // eslint-disable-next-line vue/no-reserved-keys
       _value: [], // Internal value managed by Vue Select if no `value` prop is passed
@@ -868,10 +900,17 @@ export default {
      * @return {array}
      */
     filteredOptions() {
+      const limitOptions = (options) => {
+        if (this.limit !== null) {
+          return options.slice(0, this.limit)
+        }
+        return options
+      }
+
       const optionList = [].concat(this.optionList)
 
       if (!this.filterable && !this.taggable) {
-        return optionList
+        return limitOptions(optionList)
       }
 
       let options = this.search.length
@@ -883,7 +922,7 @@ export default {
           options.unshift(createdOption)
         }
       }
-      return options
+      return limitOptions(options)
     },
 
     /**
@@ -1029,12 +1068,38 @@ export default {
       this.$emit('option:deselected', option)
     },
 
+    /**
+     * De-select a given option on keyboard input.
+     * @param  {Object|String} option
+     * @param  {Number} index
+     * @return {void}
+     */
+    keyboardDeselect(option, index) {
+      this.deselect(option)
+      /**
+       * The index of the next deselect is not yet at the same index as the
+       * removed deselect element because Vue updates asynchronously
+       *
+       * $nextTick cannot be used as the tests will fail even after using
+       * $nextTick in the tests as well
+       */
+      const nextDeselect = this.$refs.deselectButtons?.[index + 1]
+      const prevDeselect = this.$refs.deselectButtons?.[index - 1]
+      const deselectToFocus = nextDeselect ?? prevDeselect
+      if (deselectToFocus) {
+        deselectToFocus.focus()
+      } else {
+        this.searchEl.focus()
+      }
+    },
+
     /**
      * Clears the currently selected value(s)
      * @return {void}
      */
     clearSelection() {
       this.updateValue(this.multiple ? [] : null)
+      this.searchEl.focus()
     },
 
     /**
@@ -1134,6 +1199,19 @@ export default {
       return this.isOptionSelected(option) && this.deselectFromDropdown
     },
 
+    /**
+     * Check if the option at the given index should display a
+     * keyboard focus border.
+     * @param  {Number} index
+     * @return {Boolean}
+     */
+    hasKeyboardFocusBorder(index) {
+      if (this.keyboardFocusBorder && this.isKeyboardNavigation) {
+        return index === this.typeAheadPointer
+      }
+      return false
+    },
+
     /**
      * Determine if two option objects are matching.
      *
@@ -1221,6 +1299,20 @@ export default {
       )
     },
 
+    /**
+     * Determine the `aria-selected` value
+     * of an option
+     *
+     * @param  {Object|String} option
+     * @return {null|string}
+     */
+    optionAriaSelected(option) {
+      if (!this.selectable(option)) {
+        return null
+      }
+      return String(this.isOptionSelected(option))
+    },
+
     /**
      * Ensures that options are always
      * passed as objects to scoped slots.
@@ -1309,6 +1401,20 @@ export default {
       this.mousedown = false
     },
 
+    /**
+     * Event-Handler for option mousemove
+     * @param {Object|String} option
+     * @param {Number} index
+     * @return {void}
+     */
+    onMouseMove(option, index) {
+      this.isKeyboardNavigation = false
+      if (!this.selectable(option)) {
+        return
+      }
+      this.typeAheadPointer = index
+    },
+
     /**
      * Search <input> KeyBoardEvent handler.
      * @param {KeyboardEvent} e
@@ -1317,6 +1423,10 @@ export default {
     onSearchKeyDown(e) {
       const preventAndSelect = (e) => {
         e.preventDefault()
+        if (!this.open) {
+          this.open = true
+          return
+        }
         return !this.isComposing && this.typeAheadSelect()
       }
 
@@ -1330,6 +1440,7 @@ export default {
         //  up.prevent
         38: (e) => {
           e.preventDefault()
+          this.isKeyboardNavigation = true
           if (!this.open) {
             this.open = true
             return
@@ -1339,6 +1450,7 @@ export default {
         //  down.prevent
         40: (e) => {
           e.preventDefault()
+          this.isKeyboardNavigation = true
           if (!this.open) {
             this.open = true
             return

src/css/global/variables.css

@@ -54,9 +54,12 @@
     --vs-dropdown-option-padding: 3px 20px;
 
     /* Active State */
-    --vs-dropdown-option--active-bg: #5897fb;
+    --vs-dropdown-option--active-bg: #136cfb;
     --vs-dropdown-option--active-color: #fff;
 
+    /* Keyboard Focus State */
+    --vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px #949494;
+
     /* Deselect State */
     --vs-dropdown-option--deselect-bg: #fb5858;
     --vs-dropdown-option--deselect-color: #fff;

src/css/modules/dropdown-option.css

@@ -14,6 +14,10 @@
     color: var(--vs-dropdown-option--active-color);
 }
 
+.vs__dropdown-option--kb-focus {
+    box-shadow: var(--vs-dropdown-option--kb-focus-box-shadow);
+}
+
 .vs__dropdown-option--deselect {
     background: var(--vs-dropdown-option--deselect-bg);
     color: var(--vs-dropdown-option--deselect-color);

src/css/modules/dropdown-toggle.css

@@ -25,6 +25,7 @@
     flex-basis: 100%;
     flex-grow: 1;
     flex-wrap: wrap;
+    min-width: 0;
     padding: 0 2px;
     position: relative;
 }

src/css/modules/selected.css

@@ -9,6 +9,7 @@
     color: var(--vs-selected-color);
     line-height: var(--vs-line-height);
     margin: 4px 2px 0px 2px;
+    min-width: 0;
     padding: 0 0.25em;
     z-index: 0;
 }
@@ -34,6 +35,7 @@
     }
     &.vs--open .vs__selected,
     &.vs--loading .vs__selected {
+        max-width: 100%;
         position: absolute;
         opacity: 0.4;
     }

src/directives/appendToBody.js

@@ -1,6 +1,8 @@
 export default {
   inserted(el, bindings, { context }) {
     if (context.appendToBody) {
+      document.body.appendChild(el)
+
       const {
         height,
         top,
@@ -16,8 +18,6 @@ export default {
         left: scrollX + left + 'px',
         top: scrollY + top + height + 'px',
       })
-
-      document.body.appendChild(el)
     }
   },
 

src/mixins/typeAheadPointer.js

@@ -7,6 +7,9 @@ export default {
 
   watch: {
     filteredOptions() {
+      if (!this.resetFocusOnOptionsChange) {
+        return
+      }
       for (let i = 0; i < this.filteredOptions.length; i++) {
         if (this.selectable(this.filteredOptions[i])) {
           this.typeAheadPointer = i