@gitlab/ui 38.10.2 → 38.11.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [38.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.10.2...v38.11.0) (2022-04-18)
+
+
+### Features
+
+* **GlFilteredSearch:** Allow token navigation with arrows ([80844aa](https://gitlab.com/gitlab-org/gitlab-ui/commit/80844aac908452e626d1c3e4fb0c9aef9c8a5e25))
+* **GlFilteredSearch:** Allow token navigation with arrows ([b7d1519](https://gitlab.com/gitlab-org/gitlab-ui/commit/b7d15196145f53bb5d7be0361e7d7a692c2b5dc4))
+* **GlFilteredSearch:** Allow token navigation with arrows ([9f2a449](https://gitlab.com/gitlab-org/gitlab-ui/commit/9f2a44951657a4aeaaa162f1bd31d60231eb8be1))
+
 ## [38.10.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.10.1...v38.10.2) (2022-04-14)
 
 

package/dist/components/base/filtered_search/filtered_search.js

@@ -120,7 +120,8 @@ var script = {
     return {
       tokens: initialState(),
       activeTokenIdx: null,
-      suggestionsStyle: {}
+      suggestionsStyle: {},
+      intendedCursorPosition: 'end'
     };
   },
 
@@ -224,6 +225,20 @@ var script = {
       this.activeTokenIdx = idx;
     },
 
+    activatePreviousToken() {
+      if (this.activeTokenIdx > 0) {
+        this.activeTokenIdx -= 1;
+        this.intendedCursorPosition = 'end';
+      }
+    },
+
+    activateNextToken() {
+      if (this.activeTokenIdx < this.value.length) {
+        this.activeTokenIdx += 1;
+        this.intendedCursorPosition = 'start';
+      }
+    },
+
     alignSuggestions(ref) {
       const offsetRef = ref.getBoundingClientRect().left;
       const offsetMenu = this.$el.getBoundingClientRect().left;
@@ -234,6 +249,7 @@ var script = {
     },
 
     deactivate(token) {
+      this.intendedCursorPosition = 'end';
       const tokenIdx = this.tokens.indexOf(token);
 
       if (tokenIdx === -1 || this.activeTokenIdx !== tokenIdx) {
@@ -327,7 +343,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('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable"},[_vm._l((_vm.tokens),function(token,idx){return [_c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{
             'gl-filtered-search-last-item': _vm.isLastToken(idx),
-          },attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken(idx)},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx, $event)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)}},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})]})],2),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
+          },attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"cursor-position":_vm.intendedCursorPosition,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken(idx)},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx, $event)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)},"previous":_vm.activatePreviousToken,"next":_vm.activateNextToken},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})]})],2),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/filtered_search/filtered_search_term.js

@@ -69,6 +69,11 @@ var script = {
       type: Array,
       required: false,
       default: () => []
+    },
+    cursorPosition: {
+      type: String,
+      required: true,
+      validator: value => ['start', 'end'].includes(value)
     }
   },
   computed: {
@@ -116,7 +121,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:"gl-h-auto gl-filtered-search-term"},[_c('gl-filtered-search-token-segment',{staticClass:"gl-filtered-search-term-token",class:{ 'gl-w-full': _vm.placeholder },attrs:{"active":_vm.active,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":function($event){return _vm.$emit('replace', { type: $event })},"backspace":_vm.onBackspace,"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return _vm._l((_vm.suggestedTokens),function(item,idx){return _c('gl-filtered-search-suggestion',{key:idx,attrs:{"value":item.type,"icon-name":item.icon}},[_vm._v("\n        "+_vm._s(item.title)+"\n      ")])})},proxy:true},{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder}},'input',_vm.searchInputAttributes,false)):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-auto gl-filtered-search-term",attrs:{"data-testid":"filtered-search-term"}},[_c('gl-filtered-search-token-segment',{ref:"segment",staticClass:"gl-filtered-search-term-token",class:{ 'gl-w-full': _vm.placeholder },attrs:{"active":_vm.active,"cursor-position":_vm.cursorPosition,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":function($event){return _vm.$emit('replace', { type: $event })},"backspace":_vm.onBackspace,"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)},"previous":function($event){return _vm.$emit('previous')},"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return _vm._l((_vm.suggestedTokens),function(item,idx){return _c('gl-filtered-search-suggestion',{key:idx,attrs:{"value":item.type,"icon-name":item.icon}},[_vm._v("\n        "+_vm._s(item.title)+"\n      ")])})},proxy:true},{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder,"data-testid":"filtered-search-term-input"}},'input',_vm.searchInputAttributes,false)):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/filtered_search/filtered_search_token.js

@@ -73,13 +73,19 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    cursorPosition: {
+      type: String,
+      required: true,
+      validator: value => ['start', 'end'].includes(value)
     }
   },
 
   data() {
     return {
       activeSegment: null,
-      tokenValue: _cloneDeep(this.value)
+      tokenValue: _cloneDeep(this.value),
+      intendedCursorPosition: this.cursorPosition
     };
   },
 
@@ -139,6 +145,8 @@ var script = {
 
       handler(newValue) {
         if (newValue) {
+          this.intendedCursorPosition = this.cursorPosition;
+
           if (!this.activeSegment) {
             this.activateSegment(this.tokenValue.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
           }
@@ -274,6 +282,26 @@ var script = {
       this.activateSegment(this.$options.segments.SEGMENT_DATA);
     },
 
+    activatePreviousOperatorSegment() {
+      this.activateSegment(this.$options.segments.SEGMENT_OPERATOR);
+      this.intendedCursorPosition = 'end';
+    },
+
+    activatePreviousTitleSegment() {
+      this.activateSegment(this.$options.segments.SEGMENT_TITLE);
+      this.intendedCursorPosition = 'end';
+    },
+
+    activateNextDataSegment() {
+      this.activateDataSegment();
+      this.intendedCursorPosition = 'start';
+    },
+
+    activateNextOperatorSegment() {
+      this.activateSegment(this.$options.segments.SEGMENT_OPERATOR);
+      this.intendedCursorPosition = 'start';
+    },
+
     handleComplete() {
       if (this.config.multiSelect) {
         this.$emit('input', { ...this.tokenValue,
@@ -305,11 +333,11 @@ 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:"gl-filtered-search-token",class:{ 'gl-filtered-search-token-active': _vm.active }},[_c('gl-filtered-search-token-segment',{key:"title-segment",attrs:{"value":_vm.config.title,"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_TITLE),"options":_vm.availableTokensWithSelf},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_TITLE)},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":_vm.replaceToken,"backspace":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')}},scopedSlots:_vm._u([{key:"view",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-filtered-search-token",class:{ 'gl-filtered-search-token-active': _vm.active },attrs:{"data-testid":"filtered-search-token"}},[_c('gl-filtered-search-token-segment',{key:"title-segment",attrs:{"value":_vm.config.title,"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_TITLE),"cursor-position":_vm.intendedCursorPosition,"options":_vm.availableTokensWithSelf},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_TITLE)},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":_vm.replaceToken,"backspace":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')},"previous":function($event){return _vm.$emit('previous')},"next":_vm.activateNextOperatorSegment},scopedSlots:_vm._u([{key:"view",fn:function(ref){
 var inputValue = ref.inputValue;
-return [_c('gl-token',{staticClass:"gl-filtered-search-token-type",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_TITLE),attrs:{"view-only":""}},[_vm._v(_vm._s(inputValue))])]}}])}),_vm._v(" "),_c('gl-filtered-search-token-segment',{key:"operator-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_OPERATOR),"options":_vm.operators,"custom-input-keydown-handler":_vm.handleOperatorKeydown,"view-only":""},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"backspace":_vm.replaceWithTermIfEmpty,"complete":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_DATA)},"deactivate":function($event){return _vm.$emit('deactivate')}},scopedSlots:_vm._u([{key:"view",fn:function(){return [_c('gl-token',{staticClass:"gl-filtered-search-token-operator",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_OPERATOR),attrs:{"variant":"search-value","view-only":""}},[_vm._v(_vm._s(_vm.operatorDescription))])]},proxy:true},{key:"option",fn:function(ref){
+return [_c('gl-token',{staticClass:"gl-filtered-search-token-type",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_TITLE),attrs:{"view-only":""}},[_vm._v(_vm._s(inputValue))])]}}])}),_vm._v(" "),_c('gl-filtered-search-token-segment',{key:"operator-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_OPERATOR),"cursor-position":_vm.intendedCursorPosition,"options":_vm.operators,"custom-input-keydown-handler":_vm.handleOperatorKeydown,"view-only":""},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"backspace":_vm.replaceWithTermIfEmpty,"complete":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_DATA)},"deactivate":function($event){return _vm.$emit('deactivate')},"previous":_vm.activatePreviousTitleSegment,"next":_vm.activateNextDataSegment},scopedSlots:_vm._u([{key:"view",fn:function(){return [_c('gl-token',{staticClass:"gl-filtered-search-token-operator",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_OPERATOR),attrs:{"variant":"search-value","view-only":""}},[_vm._v(_vm._s(_vm.operatorDescription))])]},proxy:true},{key:"option",fn:function(ref){
 var option = ref.option;
-return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.tokenValue.operator),callback:function ($$v) {_vm.$set(_vm.tokenValue, "operator", $$v);},expression:"tokenValue.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"option-text-field":"title"},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
+return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.tokenValue.operator),callback:function ($$v) {_vm.$set(_vm.tokenValue, "operator", $$v);},expression:"tokenValue.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"cursor-position":_vm.intendedCursorPosition,"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"option-text-field":"title"},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)},"previous":_vm.activatePreviousOperatorSegment,"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
 var inputValue = ref.inputValue;
 return [_vm._t("view-token",[_c('gl-token',{staticClass:"gl-filtered-search-token-data",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA),attrs:{"variant":"search-value"},on:{"mousedown":_vm.destroyByClose}},[_c('span',{staticClass:"gl-filtered-search-token-data-content"},[_vm._t("view",[_vm._v(_vm._s(inputValue))],null,{ inputValue: inputValue })],2)])],null,{
           inputValue: inputValue,

package/dist/components/base/filtered_search/filtered_search_token_segment.js

@@ -79,6 +79,11 @@ var script = {
       type: Array,
       required: false,
       default: () => []
+    },
+    cursorPosition: {
+      type: String,
+      required: true,
+      validator: value => ['start', 'end'].includes(value)
     }
   },
 
@@ -218,6 +223,10 @@ var script = {
             inline: 'end'
           });
           this.alignSuggestions(input);
+
+          if (this.cursorPosition === 'start') {
+            input === null || input === void 0 ? void 0 : input.setSelectionRange(0, 0);
+          }
         }
       });
     },
@@ -255,24 +264,33 @@ var script = {
         key
       } = e;
       const {
-        suggestions
+        suggestions,
+        input
       } = this.$refs;
       const suggestedValue = suggestions === null || suggestions === void 0 ? void 0 : suggestions.getValue();
-
-      if (key === 'Backspace') {
-        if (this.inputValue === '') {
-          e.preventDefault();
-          /**
-           * Emitted when Backspace is pressed and the value is empty
-           */
-
-          this.$emit('backspace');
-        }
-
-        return;
-      }
-
       const handlers = {
+        ArrowLeft: () => {
+          if (input.selectionStart === 0) {
+            e.preventDefault();
+            this.$emit('previous');
+          }
+        },
+        ArrowRight: () => {
+          if (input.selectionEnd === this.inputValue.length) {
+            e.preventDefault();
+            this.$emit('next');
+          }
+        },
+        Backspace: () => {
+          if (this.inputValue === '') {
+            e.preventDefault();
+            /**
+             * Emitted when Backspace is pressed and the value is empty
+             */
+
+            this.$emit('backspace');
+          }
+        },
         Enter: () => {
           e.preventDefault();
 
@@ -341,7 +359,9 @@ 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',_vm._b({staticClass:"gl-filtered-search-token-segment",class:{ 'gl-filtered-search-token-segment-active': _vm.active },attrs:{"data-testid":"filtered-search-token-segment"},on:{"mousedown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.emitIfInactive($event)}}},'div',_vm.containerAttributes,false),[(_vm.active)?[(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",[_vm._v("\n              "+_vm._s(option[_vm.optionTextField])+"\n            ")],null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",[_vm._v(_vm._s(_vm.inputValue))],null,{ inputValue: _vm.inputValue })],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._b({staticClass:"gl-filtered-search-token-segment",class:{
+    'gl-filtered-search-token-segment-active': _vm.active,
+  },attrs:{"data-testid":"filtered-search-token-segment"},on:{"mousedown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.emitIfInactive($event)}}},'div',_vm.containerAttributes,false),[(_vm.active)?[(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",[_vm._v("\n              "+_vm._s(option[_vm.optionTextField])+"\n            ")],null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",[_vm._v(_vm._s(_vm.inputValue))],null,{ inputValue: _vm.inputValue })],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.10.2",
+  "version": "38.11.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -92,15 +92,15 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.20",
-    "@storybook/addon-docs": "6.4.20",
-    "@storybook/addon-essentials": "6.4.20",
+    "@storybook/addon-a11y": "6.4.22",
+    "@storybook/addon-docs": "6.4.22",
+    "@storybook/addon-essentials": "6.4.22",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.20",
-    "@storybook/addon-storyshots-puppeteer": "6.4.20",
-    "@storybook/addon-viewport": "6.4.20",
-    "@storybook/theming": "6.4.20",
-    "@storybook/vue": "6.4.20",
+    "@storybook/addon-storyshots": "6.4.22",
+    "@storybook/addon-storyshots-puppeteer": "6.4.22",
+    "@storybook/addon-viewport": "6.4.22",
+    "@storybook/theming": "6.4.22",
+    "@storybook/vue": "6.4.22",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

package/src/components/base/filtered_search/__snapshots__/filtered_search_term.spec.js.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Filtered search term renders input with value in active mode 1`] = `
-<div class="gl-h-auto gl-filtered-search-term">
-  <div active="true" value="test-value" class="gl-filtered-search-term-token">test-value</div>
+<div data-testid="filtered-search-term" class="gl-h-auto gl-filtered-search-term">
+  <div active="true" cursor-position="end" value="test-value" class="gl-filtered-search-term-token">test-value</div>
 </div>
 `;
 
 exports[`Filtered search term renders value in inactive mode 1`] = `
-<div class="gl-h-auto gl-filtered-search-term">
-  <div value="test-value" class="gl-filtered-search-term-token">test-value</div>
+<div data-testid="filtered-search-term" class="gl-h-auto gl-filtered-search-term">
+  <div cursor-position="end" value="test-value" class="gl-filtered-search-term-token">test-value</div>
 </div>
 `;

package/src/components/base/filtered_search/filtered_search.stories.js

@@ -9,6 +9,7 @@ import {
   GlIcon,
   GlToken,
   GlAvatar,
+  GlDropdownDivider,
 } from '../../../index';
 import { setStoryTimeout } from '../../../utils/test_utils';
 import { makeContainer } from '../../../utils/story_decorators/container';
@@ -178,7 +179,13 @@ const MilestoneToken = {
 
 const LabelToken = {
   name: 'LabelToken',
-  components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon, GlToken },
+  components: {
+    GlFilteredSearchToken,
+    GlFilteredSearchSuggestion,
+    GlLoadingIcon,
+    GlToken,
+    GlDropdownDivider,
+  },
   props: ['value', 'active'],
   inheritAttrs: false,
   data() {

package/src/components/base/filtered_search/filtered_search.vue

@@ -119,6 +119,7 @@ export default {
       tokens: initialState(),
       activeTokenIdx: null,
       suggestionsStyle: {},
+      intendedCursorPosition: 'end',
     };
   },
   computed: {
@@ -210,6 +211,20 @@ export default {
       this.activeTokenIdx = idx;
     },
 
+    activatePreviousToken() {
+      if (this.activeTokenIdx > 0) {
+        this.activeTokenIdx -= 1;
+        this.intendedCursorPosition = 'end';
+      }
+    },
+
+    activateNextToken() {
+      if (this.activeTokenIdx < this.value.length) {
+        this.activeTokenIdx += 1;
+        this.intendedCursorPosition = 'start';
+      }
+    },
+
     alignSuggestions(ref) {
       const offsetRef = ref.getBoundingClientRect().left;
       const offsetMenu = this.$el.getBoundingClientRect().left;
@@ -218,6 +233,7 @@ export default {
     },
 
     deactivate(token) {
+      this.intendedCursorPosition = 'end';
       const tokenIdx = this.tokens.indexOf(token);
       if (tokenIdx === -1 || this.activeTokenIdx !== tokenIdx) {
         return;
@@ -341,6 +357,7 @@ export default {
             v-model="token.value"
             :config="getTokenEntry(token.type)"
             :active="activeTokenIdx === idx"
+            :cursor-position="intendedCursorPosition"
             :available-tokens="currentAvailableTokens"
             :current-value="tokens"
             :index="idx"
@@ -359,6 +376,8 @@ export default {
             @complete="completeToken"
             @submit="submit"
             @split="createTokens(idx, $event)"
+            @previous="activatePreviousToken"
+            @next="activateNextToken"
           />
         </template>
       </div>

package/src/components/base/filtered_search/filtered_search_term.spec.js

@@ -17,6 +17,7 @@ describe('Filtered search term', () => {
 
   const defaultProps = {
     availableTokens: [],
+    cursorPosition: 'end',
   };
 
   const segmentStub = {

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -63,6 +63,11 @@ export default {
       required: false,
       default: () => [],
     },
+    cursorPosition: {
+      type: String,
+      required: true,
+      validator: (value) => ['start', 'end'].includes(value),
+    },
   },
   computed: {
     suggestedTokens() {
@@ -101,7 +106,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-h-auto gl-filtered-search-term">
+  <div class="gl-h-auto gl-filtered-search-term" data-testid="filtered-search-term">
     <!--
       Emitted when this term token is clicked.
       @event activate
@@ -125,9 +130,11 @@ export default {
       @property {array} newTokens Token configurations
     -->
     <gl-filtered-search-token-segment
+      ref="segment"
       v-model="internalValue"
       class="gl-filtered-search-term-token"
       :active="active"
+      :cursor-position="cursorPosition"
       :class="{ 'gl-w-full': placeholder }"
       :search-input-attributes="searchInputAttributes"
       :is-last-token="isLastToken"
@@ -138,6 +145,8 @@ export default {
       @backspace="onBackspace"
       @submit="$emit('submit')"
       @split="$emit('split', $event)"
+      @previous="$emit('previous')"
+      @next="$emit('next')"
     >
       <template #suggestions>
         <gl-filtered-search-suggestion
@@ -156,6 +165,7 @@ export default {
           class="gl-filtered-search-term-input"
           :placeholder="placeholder"
           :aria-label="placeholder"
+          data-testid="filtered-search-term-input"
         />
         <template v-else>{{ value.data }}</template>
       </template>

package/src/components/base/filtered_search/filtered_search_token.spec.js

@@ -30,6 +30,7 @@ describe('Filtered search token', () => {
   const defaultProps = {
     config: { title: 'testTitle' },
     availableTokens,
+    cursorPosition: 'end',
   };
 
   const createComponent = (props) => {

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -65,11 +65,17 @@ export default {
       required: false,
       default: false,
     },
+    cursorPosition: {
+      type: String,
+      required: true,
+      validator: (value) => ['start', 'end'].includes(value),
+    },
   },
   data() {
     return {
       activeSegment: null,
       tokenValue: cloneDeep(this.value),
+      intendedCursorPosition: this.cursorPosition,
     };
   },
 
@@ -127,6 +133,7 @@ export default {
       immediate: true,
       handler(newValue) {
         if (newValue) {
+          this.intendedCursorPosition = this.cursorPosition;
           if (!this.activeSegment) {
             this.activateSegment(this.tokenValue.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
           }
@@ -239,6 +246,26 @@ export default {
       this.activateSegment(this.$options.segments.SEGMENT_DATA);
     },
 
+    activatePreviousOperatorSegment() {
+      this.activateSegment(this.$options.segments.SEGMENT_OPERATOR);
+      this.intendedCursorPosition = 'end';
+    },
+
+    activatePreviousTitleSegment() {
+      this.activateSegment(this.$options.segments.SEGMENT_TITLE);
+      this.intendedCursorPosition = 'end';
+    },
+
+    activateNextDataSegment() {
+      this.activateDataSegment();
+      this.intendedCursorPosition = 'start';
+    },
+
+    activateNextOperatorSegment() {
+      this.activateSegment(this.$options.segments.SEGMENT_OPERATOR);
+      this.intendedCursorPosition = 'start';
+    },
+
     handleComplete() {
       if (this.config.multiSelect) {
         this.$emit('input', { ...this.tokenValue, data: this.multiSelectValues.join(COMMA) });
@@ -263,7 +290,11 @@ export default {
 </script>
 
 <template>
-  <div class="gl-filtered-search-token" :class="{ 'gl-filtered-search-token-active': active }">
+  <div
+    class="gl-filtered-search-token"
+    :class="{ 'gl-filtered-search-token-active': active }"
+    data-testid="filtered-search-token"
+  >
     <!--
       Emitted when the token is submitted.
       @event submit
@@ -272,12 +303,15 @@ export default {
       key="title-segment"
       :value="config.title"
       :active="isSegmentActive($options.segments.SEGMENT_TITLE)"
+      :cursor-position="intendedCursorPosition"
       :options="availableTokensWithSelf"
       @activate="activateSegment($options.segments.SEGMENT_TITLE)"
       @deactivate="$emit('deactivate')"
       @complete="replaceToken"
       @backspace="$emit('destroy')"
       @submit="$emit('submit')"
+      @previous="$emit('previous')"
+      @next="activateNextOperatorSegment"
     >
       <template #view="{ inputValue }">
         <gl-token
@@ -292,6 +326,7 @@ export default {
       key="operator-segment"
       v-model="tokenValue.operator"
       :active="isSegmentActive($options.segments.SEGMENT_OPERATOR)"
+      :cursor-position="intendedCursorPosition"
       :options="operators"
       :custom-input-keydown-handler="handleOperatorKeydown"
       view-only
@@ -299,6 +334,8 @@ export default {
       @backspace="replaceWithTermIfEmpty"
       @complete="activateSegment($options.segments.SEGMENT_DATA)"
       @deactivate="$emit('deactivate')"
+      @previous="activatePreviousTitleSegment"
+      @next="activateNextDataSegment"
     >
       <template #view>
         <gl-token
@@ -333,6 +370,7 @@ export default {
       key="data-segment"
       v-model="tokenValue.data"
       :active="isSegmentActive($options.segments.SEGMENT_DATA)"
+      :cursor-position="intendedCursorPosition"
       :multi-select="config.multiSelect"
       :options="config.options"
       option-text-field="title"
@@ -343,6 +381,8 @@ export default {
       @submit="$emit('submit')"
       @deactivate="$emit('deactivate')"
       @split="$emit('split', $event)"
+      @previous="activatePreviousOperatorSegment"
+      @next="$emit('next')"
     >
       <template #suggestions>
         <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->

package/src/components/base/filtered_search/filtered_search_token_segment.spec.js

@@ -35,7 +35,7 @@ describe('Filtered search token segment', () => {
     };
 
     wrapper = shallowMount(GlFilteredSearchTokenSegment, {
-      propsData: props,
+      propsData: { ...props, cursorPosition: 'end' },
       provide: {
         portalName: 'fakePortal',
         alignSuggestions: alignSuggestionsMock,
@@ -64,7 +64,7 @@ describe('Filtered search token segment', () => {
     };
 
     wrapper = shallowMount(fakeParent, {
-      propsData: otherProps,
+      propsData: { ...otherProps, cursorPosition: 'end' },
       stubs: { GlFilteredSearchTokenSegment },
     });
   };

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -77,6 +77,11 @@ export default {
       required: false,
       default: () => [],
     },
+    cursorPosition: {
+      type: String,
+      required: true,
+      validator: (value) => ['start', 'end'].includes(value),
+    },
   },
 
   data() {
@@ -198,6 +203,9 @@ export default {
           input.focus();
           input.scrollIntoView({ block: 'nearest', inline: 'end' });
           this.alignSuggestions(input);
+          if (this.cursorPosition === 'start') {
+            input?.setSelectionRange(0, 0);
+          }
         }
       });
     },
@@ -230,20 +238,31 @@ export default {
 
     handleInputKeydown(e) {
       const { key } = e;
-      const { suggestions } = this.$refs;
+      const { suggestions, input } = this.$refs;
       const suggestedValue = suggestions?.getValue();
-      if (key === 'Backspace') {
-        if (this.inputValue === '') {
-          e.preventDefault();
-          /**
-           * Emitted when Backspace is pressed and the value is empty
-           */
-          this.$emit('backspace');
-        }
-        return;
-      }
 
       const handlers = {
+        ArrowLeft: () => {
+          if (input.selectionStart === 0) {
+            e.preventDefault();
+            this.$emit('previous');
+          }
+        },
+        ArrowRight: () => {
+          if (input.selectionEnd === this.inputValue.length) {
+            e.preventDefault();
+            this.$emit('next');
+          }
+        },
+        Backspace: () => {
+          if (this.inputValue === '') {
+            e.preventDefault();
+            /**
+             * Emitted when Backspace is pressed and the value is empty
+             */
+            this.$emit('backspace');
+          }
+        },
         Enter: () => {
           e.preventDefault();
           if (suggestedValue != null) {
@@ -311,7 +330,9 @@ export default {
   <div
     v-bind="containerAttributes"
     class="gl-filtered-search-token-segment"
-    :class="{ 'gl-filtered-search-token-segment-active': active }"
+    :class="{
+      'gl-filtered-search-token-segment-active': active,
+    }"
     data-testid="filtered-search-token-segment"
     @mousedown.left="emitIfInactive"
   >