@gitlab/ui 87.2.1 → 87.3.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [87.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v87.3.0...v87.3.1) (2024-07-30)
+
+
+### Bug Fixes
+
+* add missing Tailwind equivalent for `gl-flex-shrink-0` ([5e20414](https://gitlab.com/gitlab-org/gitlab-ui/commit/5e20414a18ddd14247862baaf3eedc5390683e82))
+
+# [87.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v87.2.1...v87.3.0) (2024-07-30)
+
+
+### Features
+
+* **GlTokenSelector:** Add `showAddNewAlways` prop ([89ae31c](https://gitlab.com/gitlab-org/gitlab-ui/commit/89ae31c903054f2b1866a692772799d94299e76c))
+
 ## [87.2.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v87.2.0...v87.2.1) (2024-07-28)
 
 

package/bin/migrate_custom_utils_to_tw.bundled.mjs

@@ -183900,6 +183900,7 @@ var tailwindEquivalents = {
   "gl-md-flex-direction-row-reverse": "md:gl-flex-row-reverse",
   "gl-flex-grow-0!": "!gl-grow-0",
   "gl-flex-grow-1": "gl-grow",
+  "gl-flex-shrink-0": "gl-shrink-0",
   "gl-md-flex-grow-0": "md:gl-grow-0",
   "gl-flex-basis-0": "gl-basis-0",
   "gl-flex-basis-quarter": "gl-basis-1/4",

package/dist/components/base/token_selector/token_selector.js

@@ -34,6 +34,14 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * Shows 'Add new token option' in dropdown even if results are present, requires allowUserDefinedTokens to be true
+     */
+    showAddNewAlways: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     /**
      * Dropdown items are loading, can be used when requesting new dropdown items
      */
@@ -158,7 +166,10 @@ var script = {
       return !this.filteredDropdownItems.length;
     },
     userDefinedTokenCanBeAdded() {
-      return this.allowUserDefinedTokens && this.dropdownHasNoItems && this.inputText !== '';
+      if (!this.allowUserDefinedTokens || !this.inputText) {
+        return false;
+      }
+      return this.showAddNewAlways || this.dropdownHasNoItems;
     },
     hideDropdown() {
       if (this.userDefinedTokenCanBeAdded) {
@@ -250,9 +261,7 @@ var script = {
       });
     },
     handleEnter() {
-      if (this.userDefinedTokenCanBeAdded) {
-        this.addToken();
-      } else if (this.focusedDropdownItem && this.dropdownIsOpen) {
+      if (this.focusedDropdownItem && this.dropdownIsOpen) {
         this.addToken(this.focusedDropdownItem);
       }
     },
@@ -290,19 +299,13 @@ var script = {
       }
       this.focusTextInput();
     },
-    addToken() {
-      let dropdownItem = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      const token = dropdownItem !== null ? dropdownItem : {
-        id: uniqueId('user-defined-token'),
-        name: this.inputText
-      };
-
+    addToken(dropdownItem) {
       /**
        * Fired when a token is added or removed
        *
        * @property {array} selectedTokens
        */
-      this.$emit('input', [...this.selectedTokens, token]);
+      this.$emit('input', [...this.selectedTokens, dropdownItem]);
       this.inputText = '';
       this.closeDropdown();
 
@@ -311,13 +314,13 @@ var script = {
        *
        * @property {object} token
        */
-      this.$emit('token-add', token);
+      this.$emit('token-add', dropdownItem);
     },
     removeToken(token) {
       /**
-       * Fired when user types in the token selector
+       * Fired when a token is added or removed
        *
-       * @property {string} inputText
+       * @property {array} selectedTokens
        */
       this.$emit('input', this.selectedTokens.filter(selectedToken => selectedToken.id !== token.id));
       /**
@@ -366,7 +369,7 @@ const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{ref:"container",staticClass:"gl-token-selector gl-form-input form-control form-control-plaintext gl-flex !gl-cursor-text gl-items-center !gl-px-3 !gl-py-2",class:[_vm.inputFocused ? 'gl-token-selector-focus-glow' : '', _vm.containerClass, _vm.stateClass],on:{"click":_vm.handleContainerClick}},[(_vm.showEmptyPlaceholder)?_vm._t("empty-placeholder"):_vm._e(),_vm._v(" "),_c('gl-token-container',{attrs:{"tokens":_vm.selectedTokens,"state":_vm.state,"register-focus-on-token":_vm.registerFocusOnToken,"view-only":_vm.viewOnly,"show-clear-all-button":_vm.showClearAllButton},on:{"token-remove":_vm.removeToken,"cancel-focus":_vm.cancelTokenFocus,"clear-all":_vm.clearAll},scopedSlots:_vm._u([{key:"token-content",fn:function(ref){
 var token = ref.token;
-return [_vm._t("token-content",null,{"token":token})]}},{key:"text-input",fn:function(){return [_c('input',_vm._b({ref:"textInput",staticClass:"gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-gray-900 gl-outline-none",attrs:{"type":"text","autocomplete":_vm.autocomplete,"aria-labelledby":_vm.ariaLabelledby,"placeholder":_vm.placeholder,"disabled":_vm.viewOnly},domProps:{"value":_vm.inputText},on:{"input":function($event){_vm.inputText = $event.target.value;},"focus":_vm.handleFocus,"blur":_vm.handleBlur,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleBackspace.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleUpArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleDownArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleHomeKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleEndKey.apply(null, arguments)},function($event){$event.stopPropagation();return _vm.$emit('keydown', $event)}],"click":_vm.handleInputClick}},'input',_vm.textInputAttrs,false))]},proxy:true}],null,true)})],2),_vm._v(" "),_c('gl-token-selector-dropdown',{attrs:{"menu-class":_vm.menuClass,"show":_vm.dropdownIsOpen,"loading":_vm.loading,"dropdown-items":_vm.filteredDropdownItems,"selected-tokens":_vm.selectedTokens,"input-text":_vm.inputText,"allow-user-defined-tokens":_vm.allowUserDefinedTokens,"component-id":_vm.$options.componentId,"register-dropdown-event-handlers":_vm.registerDropdownEventHandlers,"register-reset-focused-dropdown-item":_vm.registerResetFocusedDropdownItem},on:{"dropdown-item-click":_vm.addToken,"show":_vm.openDropdown},scopedSlots:_vm._u([{key:"loading-content",fn:function(){return [_vm._t("loading-content")]},proxy:true},{key:"user-defined-token-content",fn:function(){return [_vm._t("user-defined-token-content",null,{"inputText":_vm.inputText})]},proxy:true},{key:"no-results-content",fn:function(){return [_vm._t("no-results-content")]},proxy:true},{key:"dropdown-item-content",fn:function(ref){
+return [_vm._t("token-content",null,{"token":token})]}},{key:"text-input",fn:function(){return [_c('input',_vm._b({ref:"textInput",staticClass:"gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-gray-900 gl-outline-none",attrs:{"type":"text","autocomplete":_vm.autocomplete,"aria-labelledby":_vm.ariaLabelledby,"placeholder":_vm.placeholder,"disabled":_vm.viewOnly},domProps:{"value":_vm.inputText},on:{"input":function($event){_vm.inputText = $event.target.value;},"focus":_vm.handleFocus,"blur":_vm.handleBlur,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleBackspace.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleUpArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleDownArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleHomeKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleEndKey.apply(null, arguments)},function($event){$event.stopPropagation();return _vm.$emit('keydown', $event)}],"click":_vm.handleInputClick}},'input',_vm.textInputAttrs,false))]},proxy:true}],null,true)})],2),_vm._v(" "),_c('gl-token-selector-dropdown',{attrs:{"menu-class":_vm.menuClass,"show":_vm.dropdownIsOpen,"loading":_vm.loading,"dropdown-items":_vm.filteredDropdownItems,"selected-tokens":_vm.selectedTokens,"input-text":_vm.inputText,"user-defined-token-can-be-added":_vm.userDefinedTokenCanBeAdded,"component-id":_vm.$options.componentId,"register-dropdown-event-handlers":_vm.registerDropdownEventHandlers,"register-reset-focused-dropdown-item":_vm.registerResetFocusedDropdownItem},on:{"dropdown-item-click":_vm.addToken,"show":_vm.openDropdown},scopedSlots:_vm._u([{key:"loading-content",fn:function(){return [_vm._t("loading-content")]},proxy:true},{key:"user-defined-token-content",fn:function(){return [_vm._t("user-defined-token-content",null,{"inputText":_vm.inputText})]},proxy:true},{key:"no-results-content",fn:function(){return [_vm._t("no-results-content")]},proxy:true},{key:"dropdown-item-content",fn:function(ref){
 var dropdownItem = ref.dropdownItem;
 return [_vm._t("dropdown-item-content",null,{"dropdownItem":dropdownItem})]}},{key:"dropdown-footer",fn:function(){return [_vm._t("dropdown-footer")]},proxy:true}],null,true),model:{value:(_vm.focusedDropdownItem),callback:function ($$v) {_vm.focusedDropdownItem=$$v;},expression:"focusedDropdownItem"}})],1)};
 var __vue_staticRenderFns__ = [];

package/dist/components/base/token_selector/token_selector_dropdown.js

@@ -1,3 +1,4 @@
+import uniqueId from 'lodash/uniqueId';
 import GlDropdownItem from '../dropdown/dropdown_item';
 import { tokensValidator } from './helpers';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -32,7 +33,7 @@ var script = {
       type: String,
       required: true
     },
-    allowUserDefinedTokens: {
+    userDefinedTokenCanBeAdded: {
       type: Boolean,
       required: true
     },
@@ -55,7 +56,27 @@ var script = {
     };
   },
   computed: {
+    userDefinedToken() {
+      return {
+        id: uniqueId('user-defined-token'),
+        name: this.inputText
+      };
+    },
+    dropdownLength() {
+      // Adds an additional dropdown item for the 'Add ... dropdown' item
+      return this.userDefinedTokenCanBeAdded ? this.dropdownItems.length : this.dropdownItems.length - 1;
+    },
+    focusedLastDropdownItem() {
+      return this.focusedDropdownItemIndex === this.dropdownLength;
+    },
+    focusedUserDefinedToken() {
+      // User defined tokens are always the last in the list
+      return this.userDefinedTokenCanBeAdded && this.focusedLastDropdownItem;
+    },
     focusedDropdownItem() {
+      if (this.focusedUserDefinedToken) {
+        return this.userDefinedToken;
+      }
       return this.dropdownItems[this.focusedDropdownItemIndex];
     }
   },
@@ -93,7 +114,7 @@ var script = {
     handleMousedown(dropdownItem) {
       // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
       // Because of this we need to manually focus on the button. We do this in `mousedown` because it is fired before the `blur` event
-      const dropdownItemRef = dropdownItem === null ? this.$refs.userDefinedTokenDropdownItem : this.getDropdownItemRef(dropdownItem);
+      const dropdownItemRef = this.getDropdownItemRef(dropdownItem);
       if (dropdownItemRef !== null && dropdownItemRef !== void 0 && dropdownItemRef.$el) {
         dropdownItemRef.$el.querySelector('button').focus();
       }
@@ -116,7 +137,7 @@ var script = {
       }
 
       // Last dropdown item has been reached
-      if (this.focusedDropdownItemIndex === this.dropdownItems.length - 1) {
+      if (this.focusedLastDropdownItem) {
         return;
       }
       this.focusNextDropdownItem();
@@ -130,7 +151,7 @@ var script = {
       this.focusLastDropdownItem();
     },
     focusLastDropdownItem() {
-      this.focusedDropdownItemIndex = this.dropdownItems.length - 1;
+      this.focusedDropdownItemIndex = this.dropdownLength;
     },
     focusFirstDropdownItem() {
       this.focusedDropdownItemIndex = 0;
@@ -152,6 +173,9 @@ var script = {
     },
     getDropdownItemRef(dropdownItem) {
       var _this$$refs$dropdownI;
+      if (this.focusedUserDefinedToken) {
+        return this.$refs[this.userDefinedToken.id];
+      }
       return (_this$$refs$dropdownI = this.$refs.dropdownItems) === null || _this$$refs$dropdownI === void 0 ? void 0 : _this$$refs$dropdownI.find(ref => ref.$attrs['data-dropdown-item-id'] === dropdownItem.id);
     },
     dropdownItemIdAttribute(dropdownItem) {
@@ -164,7 +188,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dropdown b-dropdown gl-dropdown gl-relative",class:{ show: _vm.show }},[_c('ul',{ref:"dropdownMenu",staticClass:"dropdown-menu gl-absolute",class:[{ show: _vm.show }, _vm.menuClass],attrs:{"role":"menu","aria-activedescendant":_vm.dropdownItemIdAttribute(_vm.focusedDropdownItem)}},[(_vm.loading)?_c('gl-dropdown-item',{attrs:{"disabled":""}},[_vm._t("loading-content",function(){return [_vm._v("Searching...")]})],2):(_vm.dropdownItems.length)?_vm._l((_vm.dropdownItems),function(dropdownItem){return _c('gl-dropdown-item',{key:dropdownItem.id,ref:"dropdownItems",refInFor:true,attrs:{"id":_vm.dropdownItemIdAttribute(dropdownItem),"data-dropdown-item-id":dropdownItem.id,"active":_vm.dropdownItemIsFocused(dropdownItem),"active-class":"is-focused","tabindex":"-1"},on:{"click":function($event){return _vm.handleDropdownItemClick(dropdownItem)}}},[_c('div',{staticClass:"-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(dropdownItem)}}},[_vm._t("dropdown-item-content",function(){return [_vm._v("\n            "+_vm._s(dropdownItem.name)+"\n          ")]},{"dropdownItem":dropdownItem})],2)])}):[(_vm.allowUserDefinedTokens && _vm.inputText !== '')?_c('gl-dropdown-item',{ref:"userDefinedTokenDropdownItem",attrs:{"active":"","active-class":"is-focused"},on:{"click":function($event){return _vm.handleDropdownItemClick(null)}}},[_c('div',{staticClass:"-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(null)}}},[_vm._t("user-defined-token-content",function(){return [_vm._v("\n            Add \""+_vm._s(_vm.inputText)+"\"\n          ")]},{"inputText":_vm.inputText})],2)]):_c('gl-dropdown-item',{attrs:{"disabled":""}},[_vm._t("no-results-content",function(){return [_vm._v("No matches found")]})],2)],_vm._v(" "),_vm._t("dropdown-footer")],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dropdown b-dropdown gl-dropdown gl-relative",class:{ show: _vm.show }},[_c('ul',{ref:"dropdownMenu",staticClass:"dropdown-menu gl-absolute",class:[{ show: _vm.show }, _vm.menuClass],attrs:{"role":"menu","aria-activedescendant":_vm.dropdownItemIdAttribute(_vm.focusedDropdownItem)}},[(_vm.loading)?_c('gl-dropdown-item',{attrs:{"disabled":""}},[_vm._t("loading-content",function(){return [_vm._v("Searching...")]})],2):_vm._e(),_vm._v(" "),_vm._l((_vm.dropdownItems),function(dropdownItem){return _c('gl-dropdown-item',{key:dropdownItem.id,ref:"dropdownItems",refInFor:true,attrs:{"id":_vm.dropdownItemIdAttribute(dropdownItem),"data-dropdown-item-id":dropdownItem.id,"active":_vm.dropdownItemIsFocused(dropdownItem),"active-class":"is-focused","tabindex":"-1"},on:{"click":function($event){return _vm.handleDropdownItemClick(dropdownItem)}}},[_c('div',{staticClass:"-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(dropdownItem)}}},[_vm._t("dropdown-item-content",function(){return [_vm._v("\n          "+_vm._s(dropdownItem.name)+"\n        ")]},{"dropdownItem":dropdownItem})],2)])}),_vm._v(" "),(_vm.userDefinedTokenCanBeAdded)?_c('gl-dropdown-item',{ref:_vm.userDefinedToken.id,attrs:{"id":_vm.dropdownItemIdAttribute(_vm.userDefinedToken),"data-dropdown-item-id":_vm.userDefinedToken.id,"active":_vm.dropdownItemIsFocused(_vm.userDefinedToken),"active-class":"is-focused","tabindex":"-1"},on:{"click":function($event){return _vm.handleDropdownItemClick(_vm.userDefinedToken)}}},[_c('div',{staticClass:"-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(_vm.userDefinedToken)}}},[_vm._t("user-defined-token-content",function(){return [_vm._v("\n          Add \""+_vm._s(_vm.inputText)+"\"\n        ")]},{"inputText":_vm.inputText})],2)]):(!_vm.dropdownItems.length)?_c('gl-dropdown-item',{attrs:{"disabled":""}},[_vm._t("no-results-content",function(){return [_vm._v("No matches found")]})],2):_vm._e(),_vm._v(" "),_vm._t("dropdown-footer")],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "87.2.1",
+  "version": "87.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -108,13 +108,13 @@
     "@babel/core": "^7.24.9",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-env": "^7.25.0",
     "@babel/preset-react": "^7.24.7",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.6.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.109.0",
+    "@gitlab/svgs": "3.110.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -156,7 +156,7 @@
     "esbuild": "^0.18.0",
     "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "3.3.0",
+    "eslint-plugin-cypress": "3.4.0",
     "eslint-plugin-storybook": "0.8.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",

package/src/components/base/token_selector/token_selector.md

@@ -43,3 +43,36 @@ export default {
   </div>
 </template>
 ```
+
+## User created tokens
+
+This component allows for users to create their own tokens when configured to do so.
+There are two props that support this functionality: `allowUserDefinedTokens` and `showAddNewAlways`.
+
+`allowUserDefinedTokens` is required to enable the functionality
+
+When set to `true` and a user's search text returns nothing,
+they will be presented with an additional dropdown item `Add ...`
+that takes their current search input and emits `@input`.
+The parent component can then handle the event accordingly.
+
+Additionally, there are scenarios where the user may want the ability to add a new token
+even if some search results are returned.  This functionality can be enabled by additionally
+setting `showAddNewAlways` to `true`.
+This will allow for the `Add ...` dropdown item to appear at all times
+whenever a user has inputted text, regardless if results are found.
+
+```html
+<template>
+  <div>
+    <gl-token-selector
+      v-model="selectedTokens"
+      :dropdown-items="dropdownItems"
+      allow-user-defined-items
+      show-ad-new-always
+      @input="onTokenUpdate"
+    />
+    {{ selectedTokens }}
+  </div>
+</template>
+```

package/src/components/base/token_selector/token_selector.vue

@@ -34,6 +34,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Shows 'Add new token option' in dropdown even if results are present, requires allowUserDefinedTokens to be true
+     */
+    showAddNewAlways: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     /**
      * Dropdown items are loading, can be used when requesting new dropdown items
      */
@@ -161,7 +169,11 @@ export default {
       return !this.filteredDropdownItems.length;
     },
     userDefinedTokenCanBeAdded() {
-      return this.allowUserDefinedTokens && this.dropdownHasNoItems && this.inputText !== '';
+      if (!this.allowUserDefinedTokens || !this.inputText) {
+        return false;
+      }
+
+      return this.showAddNewAlways || this.dropdownHasNoItems;
     },
     hideDropdown() {
       if (this.userDefinedTokenCanBeAdded) {
@@ -262,9 +274,7 @@ export default {
       });
     },
     handleEnter() {
-      if (this.userDefinedTokenCanBeAdded) {
-        this.addToken();
-      } else if (this.focusedDropdownItem && this.dropdownIsOpen) {
+      if (this.focusedDropdownItem && this.dropdownIsOpen) {
         this.addToken(this.focusedDropdownItem);
       }
     },
@@ -302,21 +312,13 @@ export default {
 
       this.focusTextInput();
     },
-    addToken(dropdownItem = null) {
-      const token =
-        dropdownItem !== null
-          ? dropdownItem
-          : {
-              id: uniqueId('user-defined-token'),
-              name: this.inputText,
-            };
-
+    addToken(dropdownItem) {
       /**
        * Fired when a token is added or removed
        *
        * @property {array} selectedTokens
        */
-      this.$emit('input', [...this.selectedTokens, token]);
+      this.$emit('input', [...this.selectedTokens, dropdownItem]);
 
       this.inputText = '';
       this.closeDropdown();
@@ -326,13 +328,13 @@ export default {
        *
        * @property {object} token
        */
-      this.$emit('token-add', token);
+      this.$emit('token-add', dropdownItem);
     },
     removeToken(token) {
       /**
-       * Fired when user types in the token selector
+       * Fired when a token is added or removed
        *
-       * @property {string} inputText
+       * @property {array} selectedTokens
        */
       this.$emit(
         'input',
@@ -446,7 +448,7 @@ export default {
       :dropdown-items="filteredDropdownItems"
       :selected-tokens="selectedTokens"
       :input-text="inputText"
-      :allow-user-defined-tokens="allowUserDefinedTokens"
+      :user-defined-token-can-be-added="userDefinedTokenCanBeAdded"
       :component-id="$options.componentId"
       :register-dropdown-event-handlers="registerDropdownEventHandlers"
       :register-reset-focused-dropdown-item="registerResetFocusedDropdownItem"
@@ -466,7 +468,7 @@ export default {
       </template>
       <template #no-results-content>
         <!-- @slot Content to display when `dropdown-items` is empty and
-          `allow-user-defined-tokens` is `false`. Default content is "No matches found". -->
+          both `allow-user-defined-tokens` and `show-add-new-always` is `false`. Default content is "No matches found". -->
         <slot name="no-results-content"></slot>
       </template>
       <template #dropdown-item-content="{ dropdownItem }">

package/src/components/base/token_selector/token_selector_dropdown.vue

@@ -1,4 +1,5 @@
 <script>
+import uniqueId from 'lodash/uniqueId';
 import GlDropdownItem from '../dropdown/dropdown_item.vue';
 import { tokensValidator } from './helpers';
 
@@ -30,7 +31,7 @@ export default {
       type: String,
       required: true,
     },
-    allowUserDefinedTokens: {
+    userDefinedTokenCanBeAdded: {
       type: Boolean,
       required: true,
     },
@@ -53,7 +54,30 @@ export default {
     };
   },
   computed: {
+    userDefinedToken() {
+      return {
+        id: uniqueId('user-defined-token'),
+        name: this.inputText,
+      };
+    },
+    dropdownLength() {
+      // Adds an additional dropdown item for the 'Add ... dropdown' item
+      return this.userDefinedTokenCanBeAdded
+        ? this.dropdownItems.length
+        : this.dropdownItems.length - 1;
+    },
+    focusedLastDropdownItem() {
+      return this.focusedDropdownItemIndex === this.dropdownLength;
+    },
+    focusedUserDefinedToken() {
+      // User defined tokens are always the last in the list
+      return this.userDefinedTokenCanBeAdded && this.focusedLastDropdownItem;
+    },
     focusedDropdownItem() {
+      if (this.focusedUserDefinedToken) {
+        return this.userDefinedToken;
+      }
+
       return this.dropdownItems[this.focusedDropdownItemIndex];
     },
   },
@@ -92,10 +116,7 @@ export default {
     handleMousedown(dropdownItem) {
       // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
       // Because of this we need to manually focus on the button. We do this in `mousedown` because it is fired before the `blur` event
-      const dropdownItemRef =
-        dropdownItem === null
-          ? this.$refs.userDefinedTokenDropdownItem
-          : this.getDropdownItemRef(dropdownItem);
+      const dropdownItemRef = this.getDropdownItemRef(dropdownItem);
 
       if (dropdownItemRef?.$el) {
         dropdownItemRef.$el.querySelector('button').focus();
@@ -121,7 +142,7 @@ export default {
       }
 
       // Last dropdown item has been reached
-      if (this.focusedDropdownItemIndex === this.dropdownItems.length - 1) {
+      if (this.focusedLastDropdownItem) {
         return;
       }
 
@@ -138,7 +159,7 @@ export default {
       this.focusLastDropdownItem();
     },
     focusLastDropdownItem() {
-      this.focusedDropdownItemIndex = this.dropdownItems.length - 1;
+      this.focusedDropdownItemIndex = this.dropdownLength;
     },
     focusFirstDropdownItem() {
       this.focusedDropdownItemIndex = 0;
@@ -160,6 +181,10 @@ export default {
       return dropdownItem.id === this.focusedDropdownItem.id;
     },
     getDropdownItemRef(dropdownItem) {
+      if (this.focusedUserDefinedToken) {
+        return this.$refs[this.userDefinedToken.id];
+      }
+
       return this.$refs.dropdownItems?.find(
         (ref) => ref.$attrs['data-dropdown-item-id'] === dropdownItem.id
       );
@@ -183,43 +208,49 @@ export default {
       <gl-dropdown-item v-if="loading" disabled>
         <slot name="loading-content">Searching...</slot>
       </gl-dropdown-item>
-      <template v-else-if="dropdownItems.length">
-        <gl-dropdown-item
-          v-for="dropdownItem in dropdownItems"
-          :id="dropdownItemIdAttribute(dropdownItem)"
-          ref="dropdownItems"
-          :key="dropdownItem.id"
-          :data-dropdown-item-id="dropdownItem.id"
-          :active="dropdownItemIsFocused(dropdownItem)"
-          active-class="is-focused"
-          tabindex="-1"
-          @click="handleDropdownItemClick(dropdownItem)"
-        >
-          <div class="-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3" @mousedown="handleMousedown(dropdownItem)">
-            <slot name="dropdown-item-content" :dropdown-item="dropdownItem">
-              {{ dropdownItem.name }}
-            </slot>
-          </div>
-        </gl-dropdown-item>
-      </template>
-      <template v-else>
-        <gl-dropdown-item
-          v-if="allowUserDefinedTokens && inputText !== ''"
-          ref="userDefinedTokenDropdownItem"
-          active
-          active-class="is-focused"
-          @click="handleDropdownItemClick(null)"
+
+      <gl-dropdown-item
+        v-for="dropdownItem in dropdownItems"
+        :id="dropdownItemIdAttribute(dropdownItem)"
+        ref="dropdownItems"
+        :key="dropdownItem.id"
+        :data-dropdown-item-id="dropdownItem.id"
+        :active="dropdownItemIsFocused(dropdownItem)"
+        active-class="is-focused"
+        tabindex="-1"
+        @click="handleDropdownItemClick(dropdownItem)"
+      >
+        <div class="-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3" @mousedown="handleMousedown(dropdownItem)">
+          <slot name="dropdown-item-content" :dropdown-item="dropdownItem">
+            {{ dropdownItem.name }}
+          </slot>
+        </div>
+      </gl-dropdown-item>
+
+      <gl-dropdown-item
+        v-if="userDefinedTokenCanBeAdded"
+        :id="dropdownItemIdAttribute(userDefinedToken)"
+        :ref="userDefinedToken.id"
+        :data-dropdown-item-id="userDefinedToken.id"
+        :active="dropdownItemIsFocused(userDefinedToken)"
+        active-class="is-focused"
+        tabindex="-1"
+        @click="handleDropdownItemClick(userDefinedToken)"
+      >
+        <div
+          class="-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3"
+          @mousedown="handleMousedown(userDefinedToken)"
         >
-          <div class="-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3" @mousedown="handleMousedown(null)">
-            <slot name="user-defined-token-content" :input-text="inputText">
-              Add "{{ inputText }}"
-            </slot>
-          </div>
-        </gl-dropdown-item>
-        <gl-dropdown-item v-else disabled>
-          <slot name="no-results-content">No matches found</slot>
-        </gl-dropdown-item>
-      </template>
+          <slot name="user-defined-token-content" :input-text="inputText">
+            Add "{{ inputText }}"
+          </slot>
+        </div>
+      </gl-dropdown-item>
+
+      <gl-dropdown-item v-else-if="!dropdownItems.length" disabled>
+        <slot name="no-results-content">No matches found</slot>
+      </gl-dropdown-item>
+
       <slot name="dropdown-footer"></slot>
     </ul>
   </div>