Change navigation-mixin to avoid disabled options

changelog.md

@@ -1,3 +1,5 @@
+2023-11-18 - 37b5c67d67b24357d773210c952d3a899d60b008 - onKeypress changed to skip the disabled options when updating the pointer in navigation-mixin.
+
 2023-10-11 - a06c8f9059ceb16ba00c4bf8bf0528ea2c9cee22 - Adding style support for working weekend calendar event
 
 2023-09-04 - d72a759e6904d11d222b62a792aa8c5f622238cf - Update ListTable.vue component to show partial loading status.

components/src/core/components/Input/Select/navigation-mixin.ts

@@ -70,7 +70,7 @@ export const navigationMixin = defineComponent({
     onKeypress($e: KeyboardEvent) {
       if ($e.key.length > 1) return; // Filter one letter keypress only
       const filtered = this.computedOptions.flatMap((item: Option, i: number) =>
-        item.label.toLowerCase().startsWith($e.key) ? i : [],
+        item.label.toLowerCase().startsWith($e.key) && !item._disabled ? i : [],
       );
       if (filtered.length > 0) {
         this.pointer = cycleIndexes(this.pointer, filtered);

components/src/core/components/Input/__tests__/navigation-mixin.spec.ts

@@ -17,6 +17,7 @@ const MockComponent = defineComponent({
         {id: 2, label: 'banana'},
         {id: 3, label: 'cherry'},
         {id: 4, label: 'avocado'},
+        {id: 5, label: 'lime', _disabled: true},
       ];
     },
   },
@@ -41,6 +42,19 @@ describe('navigationMixin.ts', () => {
     wrapper.vm.onKeypress(keydownEvent);
     expect(wrapper.vm.pointer).toStrictEqual(1);
   });
+  it('should not match pointer to keypress when the matching item is disabled', () => {
+    const wrapper = mount(MockComponent, {});
+    const keydownEvent = new KeyboardEvent('keydown', {key: 'l'});
+    wrapper.vm.onKeypress(keydownEvent);
+    expect(wrapper.vm.pointer).toStrictEqual(-1);
+  });
+  it('should not match pointer to keypress when the matching item is disabled - pointer should be in previous position', () => {
+    const wrapper = mount(MockComponent, {});
+    wrapper.vm.pointer = 1;
+    const keydownEvent = new KeyboardEvent('keydown', {key: 'l'});
+    wrapper.vm.onKeypress(keydownEvent);
+    expect(wrapper.vm.pointer).toStrictEqual(1);
+  });
   it('should match pointer to keypress on repeat keypress', () => {
     const wrapper = mount(MockComponent, {});
     const keydownEvent = new KeyboardEvent('keydown', {key: 'a'});
@@ -53,9 +67,9 @@ describe('navigationMixin.ts', () => {
   });
   it('should not increment pointer beyond options length', () => {
     const wrapper = mount(MockComponent, {});
-    wrapper.vm.pointer = 3;
+    wrapper.vm.pointer = 4;
     wrapper.vm.onSelectDown();
-    expect(wrapper.vm.pointer).toStrictEqual(3);
+    expect(wrapper.vm.pointer).toStrictEqual(4);
   });
   it('should not decrement pointer beyond options length', () => {
     const wrapper = mount(MockComponent, {});