diff --git a/projects/core/components/textfield/select.directive.ts b/projects/core/components/textfield/select.directive.ts index 6e7e3e2fced7..9c9645e5ecf6 100644 --- a/projects/core/components/textfield/select.directive.ts +++ b/projects/core/components/textfield/select.directive.ts @@ -44,6 +44,7 @@ export class TuiSelect extends TuiTextfieldBase { public focus(): void { this.el.classList.add('_ios-fix'); + // TODO: Disable focus for iOS 13 and 14 this.el.focus(); this.el.classList.remove('_ios-fix'); } diff --git a/projects/core/directives/dropdown/dropdown-open.directive.ts b/projects/core/directives/dropdown/dropdown-open.directive.ts index d0b365af5b5b..46afc4c7a6a9 100644 --- a/projects/core/directives/dropdown/dropdown-open.directive.ts +++ b/projects/core/directives/dropdown/dropdown-open.directive.ts @@ -107,10 +107,15 @@ export class TuiDropdownOpen implements OnChanges { } @HostListener('click', ['$event.target']) + @HostListener('keydown.enter', ['$event.target']) + @HostListener('keydown.space', ['$event.target']) protected onClick(target: HTMLElement): void { - if (!this.editable && this.host.contains(target)) { - this.update(!this.tuiDropdownOpen); + if (this.editable && !this.host.contains(target)) { + return; } + + this.update(!this.tuiDropdownOpen); + this.focusDropdown(false); } @HostListener('keydown.arrowDown', ['$event', 'false']) @@ -121,6 +126,7 @@ export class TuiDropdownOpen implements OnChanges { } event.preventDefault(); + this.update(true); this.focusDropdown(up); } @@ -182,8 +188,6 @@ export class TuiDropdownOpen implements OnChanges { private focusDropdown(previous: boolean): void { if (!this.dropdown) { - this.update(true); - return; } @@ -197,6 +201,6 @@ export class TuiDropdownOpen implements OnChanges { }); child.remove(); - focusable?.focus(); + focusable?.focus({preventScroll: true}); } } diff --git a/projects/demo-playwright/tests/core/data-list/data-list.spec.ts b/projects/demo-playwright/tests/core/data-list/data-list.spec.ts index edc0a2b83bd9..3d5a43411c40 100644 --- a/projects/demo-playwright/tests/core/data-list/data-list.spec.ts +++ b/projects/demo-playwright/tests/core/data-list/data-list.spec.ts @@ -37,7 +37,6 @@ test.describe('DataList', () => { await example.locator('button').click(); await documentationPagePO.prepareBeforeScreenshot(); await page.keyboard.down('ArrowDown'); - await page.keyboard.down('ArrowDown'); await page.waitForTimeout(100); await page.keyboard.down('Enter'); await page.waitForTimeout(100); diff --git a/projects/kit/directives/data-list-dropdown-manager/data-list-dropdown-manager.directive.ts b/projects/kit/directives/data-list-dropdown-manager/data-list-dropdown-manager.directive.ts index 5c1d4351e493..4957d3540897 100644 --- a/projects/kit/directives/data-list-dropdown-manager/data-list-dropdown-manager.directive.ts +++ b/projects/kit/directives/data-list-dropdown-manager/data-list-dropdown-manager.directive.ts @@ -148,21 +148,10 @@ export class TuiDataListDropdownManager implements AfterViewInit { } private tryToFocus(index: number): void { - const content = this.dropdowns.get(index)?.dropdownBoxRef?.location.nativeElement; + const root = this.dropdowns.get(index)?.dropdownBoxRef?.location.nativeElement; - if (!content) { - return; - } - - // First item is focus trap - const focusTrap = tuiGetClosestFocusable({initial: content, root: content}); - const item = tuiGetClosestFocusable({ - initial: focusTrap || content, - root: content, - }); - - if (item) { - item.focus(); + if (root) { + tuiGetClosestFocusable({initial: root, root})?.focus(); } } }