feat(core): DropdownOpen focus item in dropdown upon opening

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');
     }

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});
     }
 }

projects/demo-playwright/tests/core/data-list/data-list.spec.ts

@@ -37,11 +37,10 @@
         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);
         await expect(page).toHaveScreenshot('03-1-data-list.png');
         await page.keyboard.down('ArrowRight');
         await page.keyboard.down('ArrowDown');
         await page.keyboard.down('ArrowDown');
@@ -118,7 +117,7 @@
         await range.fill('04.02.2022 – 04.02.2023');
         await range.press('Enter');
 
         await expect(page).toHaveScreenshot('08-data-list.png');
 
         await page.locator('[automation-id="tui-data-list-calendar-option"]').click();
         await page.locator('[automation-id="tui-calendar-sheet__cell"]').nth(4).click();

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();
         }
     }
 }