Change navigation-mixin to avoid disabled options

LAN 951 : onKeypress changed to skip the disabled options when updating the pointer.
orangehrm · Nov 17, 2023 · 37b5c67 · 37b5c67
1 parent c0b4026
commit 37b5c67
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/components/src/core/components/Input/Select/navigation-mixin.ts b/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);

diff --git a/components/src/core/components/Input/__tests__/navigation-mixin.spec.ts b/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, {});