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