From 4712ec34cb317a4cfae47a906890a6783830e203 Mon Sep 17 00:00:00 2001 From: CSimoesJr Date: Tue, 7 Nov 2023 17:04:02 -0300 Subject: [PATCH 1/3] =?UTF-8?q?fix(multiselect):=20corrige=20fechamento=20?= =?UTF-8?q?do=20listbox=20ap=C3=B3s=20perda=20de=20foco?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ajusta fechamento do listbox via navegação por teclado fixes DTHFUI-7931 --- .../po-multiselect/po-multiselect.component.spec.ts | 10 +++++----- .../po-multiselect/po-multiselect.component.ts | 12 ++++++++---- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.spec.ts b/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.spec.ts index c2a45e4903..48d607be3e 100644 --- a/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.spec.ts +++ b/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.spec.ts @@ -241,7 +241,7 @@ describe('PoMultiselectComponent:', () => { expect(component.controlDropdownVisibility).not.toHaveBeenCalled(); }); - it('should return when event keyCode is PoKeyCodeEnum.tab and visibleTags.length > 1', () => { + it('should return when event keyCode is PoKeyCodeEnum.tab', () => { const event = new KeyboardEvent('keydown', { keyCode: PoKeyCodeEnum.tab }); const tagRemovable = document.createElement('span'); tagRemovable.setAttribute('class', 'po-tag-remove'); @@ -253,13 +253,13 @@ describe('PoMultiselectComponent:', () => { expect(component.visibleTags.length).toEqual(2); }); - it('should return when event keyCode is PoKeyCodeEnum.tab and visibleTags.length < 1', () => { - const event = new KeyboardEvent('keydown', { keyCode: PoKeyCodeEnum.tab }); - component.visibleTags = []; + it('should call controlDropdownVisibility(false) when keyCode tab is pressed and shiftKey is true', () => { + const event = { keyCode: PoKeyCodeEnum.tab, shiftKey: true }; + spyOn(component, 'controlDropdownVisibility'); component.onKeyDown(event); - expect(component.visibleTags.length).toEqual(0); + expect(component.controlDropdownVisibility).toHaveBeenCalledWith(false); }); it('should call preventDefault and controlDropdownVisibility(true) when keyCode space is pressed', () => { diff --git a/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.ts b/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.ts index a95499ba6a..8d31707ec7 100644 --- a/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.ts +++ b/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.ts @@ -138,6 +138,7 @@ export class PoMultiselectComponent private initCalculateItems = true; private isCalculateVisibleItems: boolean = true; private cacheOptions: Array; + private focusOnTag = false; constructor( private renderer: Renderer2, @@ -314,10 +315,12 @@ export class PoMultiselectComponent } onKeyDown(event?: any) { - if ( - (event.keyCode === PoKeyCodeEnum.tab && this.visibleTags.length > 1) || - (event.keyCode === PoKeyCodeEnum.tab && this.visibleTags.length < 1) - ) { + if (event.shiftKey && event.keyCode === PoKeyCodeEnum.tab && !this.focusOnTag) { + this.controlDropdownVisibility(false); + } + this.focusOnTag = false; + + if (event.keyCode === PoKeyCodeEnum.tab) { return; } @@ -553,6 +556,7 @@ export class PoMultiselectComponent const KEY_SPACE = 'Space'; const KEY_ARROW_LEFT = 'ArrowLeft'; const KEY_ARROW_RIGHT = 'ArrowRight'; + this.focusOnTag = true; if (event.code === KEY_SPACE) { event.preventDefault(); From b8ee65533c0b5b297d5610f2efdf6c452893fc6e Mon Sep 17 00:00:00 2001 From: CSimoesJr Date: Tue, 7 Nov 2023 17:05:15 -0300 Subject: [PATCH 2/3] =?UTF-8?q?fix(combo):=20corrige=20fechamento=20do=20l?= =?UTF-8?q?istbox=20ap=C3=B3s=20perda=20de=20foco?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ajusta fechamento do listbox via navegação por teclado fixes DTHFUI-7931 --- .../po-field/po-combo/po-combo.component.spec.ts | 9 +++++++++ .../components/po-field/po-combo/po-combo.component.ts | 5 +++++ 2 files changed, 14 insertions(+) diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.spec.ts b/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.spec.ts index 3476fe40f9..236867d063 100644 --- a/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.spec.ts +++ b/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.spec.ts @@ -634,6 +634,15 @@ describe('PoComboComponent:', () => { expect(component.isFiltering).toBe(false); }); + it('should call controlComboVisibility(false) when keyCode tab is pressed and shiftKey is true', () => { + const event = { ...fakeEvent, keyCode: 9, shiftKey: true }; + spyOn(component, 'controlComboVisibility'); + + component.onKeyDown(event); + + expect(component.controlComboVisibility).toHaveBeenCalledWith(false); + }); + it(`should call 'controlComboVisibility', 'updateComboList' and 'updateSelectedValue' with 'selectedView' and 'true' if selectedView.label is not equal inputValue, typed 'enter', 'selectedView' is truthy and 'comboOpen' is true `, () => { const event = { ...fakeEvent, keyCode: 13, target: { value: 'lab' } }; diff --git a/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.ts b/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.ts index 5ad0bcbcfc..b53f073815 100644 --- a/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.ts +++ b/projects/ui/src/lib/components/po-field/po-combo/po-combo.component.ts @@ -227,6 +227,11 @@ export class PoComboComponent extends PoComboBaseComponent implements AfterViewI const key = event.keyCode; const inputValue = event.target.value; + if (event.shiftKey && key === PoKeyCodeEnum.tab) { + this.controlComboVisibility(false); + return; + } + // busca um registro quando acionar o tab if (this.service && key === PoKeyCodeEnum.tab && inputValue && !this.disabledTabFilter) { this.controlComboVisibility(false); From 758425258aecc469a999ed223f431a501318c902 Mon Sep 17 00:00:00 2001 From: CSimoesJr Date: Tue, 7 Nov 2023 17:06:23 -0300 Subject: [PATCH 3/3] fix(listbox): corrige clique no checkbox Corrige checkbox para permitir clique. fixes DTHFUI-7931 --- .../po-listbox/po-item-list/po-item-list.component.html | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/ui/src/lib/components/po-listbox/po-item-list/po-item-list.component.html b/projects/ui/src/lib/components/po-listbox/po-item-list/po-item-list.component.html index 06727c39f1..d96ed26c9e 100644 --- a/projects/ui/src/lib/components/po-listbox/po-item-list/po-item-list.component.html +++ b/projects/ui/src/lib/components/po-listbox/po-item-list/po-item-list.component.html @@ -46,6 +46,7 @@ [p-disabled-tabindex]="true" [p-checkboxValue]="checkboxValue === null ? 'mixed' : checkboxValue" [p-disabled]="disabled" + (click)="onCheckboxItem()" (p-change)="onSelectItem({label})" >