@gitlab/ui 42.0.0 → 42.0.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [42.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v42.0.0...v42.0.1) (2022-06-16)
+
+
+### Bug Fixes
+
+* GlTokenSelector: make it possible to focus input field with Tab button ([22e7de5](https://gitlab.com/gitlab-org/gitlab-ui/commit/22e7de514610d1905173804cb122145710527001))
+
 # [42.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v41.10.0...v42.0.0) (2022-06-16)
 
 

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

@@ -110,6 +110,10 @@ var script = {
       this.$emit('cancel-focus');
     },
 
+    handleTab() {
+      this.$emit('cancel-focus');
+    },
+
     // Only called when a token is focused by a click/tap
     handleTokenFocus(index) {
       this.focusedTokenIndex = index;
@@ -143,7 +147,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',{ref:"tokenContainer",staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1",attrs:{"role":"listbox","aria-multiselectable":"false","aria-orientation":"horizontal","aria-invalid":_vm.state === false && 'true'},on:{"keydown":[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.handleLeftArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.handleRightArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.handleHome($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.handleEnd($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleDelete($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape($event)},function($event){$event.preventDefault();}]}},[_vm._l((_vm.tokens),function(token,index){return _c('div',{key:token.id,ref:"tokens",refInFor:true,staticClass:"gl-token-selector-token-container gl-px-1 gl-py-1 gl-outline-none",attrs:{"data-token-id":token.id,"role":"option","tabindex":"-1"},on:{"focus":function($event){_vm.bindFocusEvent ? _vm.handleTokenFocus(index) : null;}}},[_c('gl-token',{staticClass:"gl-cursor-default",class:token.class,style:(token.style),attrs:{"view-only":_vm.viewOnly},on:{"close":function($event){return _vm.handleClose(token)}}},[_vm._t("token-content",[_c('span',[_vm._v("\n          "+_vm._s(token.name)+"\n        ")])],{"token":token})],2)],1)}),_vm._v(" "),_vm._t("text-input")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"tokenContainer",staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1",attrs:{"role":"listbox","aria-multiselectable":"false","aria-orientation":"horizontal","aria-invalid":_vm.state === false && 'true'},on:{"keydown":[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.handleLeftArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.handleRightArrow($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.handleHome($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.handleEnd($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleDelete($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }$event.preventDefault();return _vm.handleTab($event)}]}},[_vm._l((_vm.tokens),function(token,index){return _c('div',{key:token.id,ref:"tokens",refInFor:true,staticClass:"gl-token-selector-token-container gl-px-1 gl-py-1 gl-outline-none",attrs:{"data-token-id":token.id,"role":"option","tabindex":"-1"},on:{"focus":function($event){_vm.bindFocusEvent ? _vm.handleTokenFocus(index) : null;}}},[_c('gl-token',{staticClass:"gl-cursor-default",class:token.class,style:(token.style),attrs:{"view-only":_vm.viewOnly},on:{"close":function($event){return _vm.handleClose(token)}}},[_vm._t("token-content",[_c('span',[_vm._v("\n          "+_vm._s(token.name)+"\n        ")])],{"token":token})],2)],1)}),_vm._v(" "),_vm._t("text-input")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/utils/constants.js

@@ -222,7 +222,8 @@ const keyboard = {
   right: 'Right',
   arrowRight: 'ArrowRight',
   home: 'Home',
-  end: 'End'
+  end: 'End',
+  tab: 'Tab'
 };
 const truncateOptions = POSITION;
 const formInputSizes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.0.0",
+  "version": "42.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/token_selector/token_container.spec.js

@@ -256,6 +256,17 @@ describe('GlTokenContainer', () => {
         const expectedFocusedToken = findTokenByName(tokens[2].name);
         expect(expectedFocusedToken.element).toHaveFocus();
       });
+
+      it('emits the `cancel-focus` event when tab key is pressed', async () => {
+        createComponent({});
+
+        const focusedToken = findTokenByName(tokens[0].name);
+
+        await focusedToken.trigger('focus');
+        await focusedToken.trigger('keydown', { key: keyboard.tab });
+
+        expect(wrapper.emitted('cancel-focus')).toEqual([[]]);
+      });
     });
   });
 });

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

@@ -95,6 +95,9 @@ export default {
       this.focusedTokenIndex = null;
       this.$emit('cancel-focus');
     },
+    handleTab() {
+      this.$emit('cancel-focus');
+    },
     // Only called when a token is focused by a click/tap
     handleTokenFocus(index) {
       this.focusedTokenIndex = index;
@@ -132,7 +135,7 @@ export default {
     @keydown.end="handleEnd"
     @keydown.delete="handleDelete"
     @keydown.esc="handleEscape"
-    @keydown.prevent
+    @keydown.tab.prevent="handleTab"
   >
     <div
       v-for="(token, index) in tokens"

package/src/utils/constants.js

@@ -264,6 +264,7 @@ export const keyboard = {
   arrowRight: 'ArrowRight',
   home: 'Home',
   end: 'End',
+  tab: 'Tab',
 };
 
 export const truncateOptions = POSITION;