diff --git a/changelog.md b/changelog.md index 493e23ced..7b2cc2440 100644 --- a/changelog.md +++ b/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. diff --git a/components/src/core/components/Input/Select/navigation-mixin.ts b/components/src/core/components/Input/Select/navigation-mixin.ts index 162c4ee13..93b8c03b0 100644 --- 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 index 7ff5425db..e4df561df 100644 --- 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, {});