Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(core): focus first element in data-list #9891

Merged
merged 1 commit into from
Dec 3, 2024
Merged

fix(core): focus first element in data-list #9891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions projects/cdk/directives/focus-trap/focus-trap.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,11 @@ export class TuiFocusTrap implements OnDestroy {
}

protected onFocusIn(node: Node): void {
if (!tuiContainsOrAfter(this.el, node)) {
const firstElementChild = this.el.firstElementChild;

if (!tuiContainsOrAfter(this.el, node) && firstElementChild) {
tuiGetClosestFocusable({
initial: this.el,
initial: firstElementChild,
root: this.el,
})?.focus();
}
Expand Down
4 changes: 2 additions & 2 deletions projects/cdk/utils/focus/get-closest-focusable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,15 +53,15 @@ export function tuiGetClosestFocusable({

treeWalker.currentNode = initial;

while (previous ? treeWalker.previousNode() : treeWalker.nextNode()) {
do {
if (tuiIsHTMLElement(treeWalker.currentNode)) {
initial = treeWalker.currentNode;
}

if (tuiIsHTMLElement(initial) && check(initial)) {
return initial;
}
}
} while (previous ? treeWalker.previousNode() : treeWalker.nextNode());

return null;
}
23 changes: 18 additions & 5 deletions projects/demo-playwright/tests/core/data-list/data-list.pw.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,37 +36,50 @@
const example = documentationPagePO.getExample('#submenu');

await example.scrollIntoViewIfNeeded();
await example.locator('button').click();
await documentationPagePO.prepareBeforeScreenshot();

await example.locator('button').click();
await page.keyboard.down('ArrowDown');
await page.keyboard.down('ArrowDown');

await expect(page).toHaveScreenshot('03-1-data-list.png');

await page.waitForTimeout(100);
await page.keyboard.down('Enter');
await page.waitForTimeout(100);

await expect(page).toHaveScreenshot('03-1-data-list.png');
await expect(page).toHaveScreenshot('03-2-data-list.png');

await page.keyboard.down('ArrowRight');

await expect(page).toHaveScreenshot('03-3-data-list.png');

Check failure on line 55 in projects/demo-playwright/tests/core/data-list/data-list.pw.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright / ubuntu-latest / 2 of 9

[chromium] › tests/core/data-list/data-list.pw.spec.ts:31:9 › DataList › Submenu 

  1) [chromium] › tests/core/data-list/data-list.pw.spec.ts:31:9 › DataList › Submenu ──────────────
    Error: expect(page).toHaveScreenshot(expected)

      101918 pixels (ratio 0.09 of all image pixels) are different.

    Expected: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/snapshots/tests/core/data-list/data-list.pw.spec.ts-snapshots/03-3-data-list-chromium-linux.png
    Received: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-core-data-list-data-list.pw-DataList-Submenu-chromium/03-3-data-list-actual.png
        Diff: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-core-data-list-data-list.pw-DataList-Submenu-chromium/03-3-data-list-diff.png

    Call log:
      - expect.toHaveScreenshot(03-3-data-list.png) with timeout 5000ms
        - verifying given screenshot expectation
      - taking page screenshot
        - disabled all CSS animations
      - waiting for fonts to load...
      - fonts loaded
      - 101918 pixels (ratio 0.09 of all image pixels) are different.
      - waiting 100ms before taking screenshot
      - taking page screenshot
        - disabled all CSS animations
      - waiting for fonts to load...
      - fonts loaded
      - captured a stable screenshot
      - 101918 pixels (ratio 0.09 of all image pixels) are different.


      53 |         await page.keyboard.down('ArrowRight');
      54 |
    > 55 |         await expect(page).toHaveScreenshot('03-3-data-list.png');
         |                            ^
      56 |
      57 |         await page.keyboard.down('ArrowDown');
      58 |         await page.keyboard.down('ArrowDown');
        at /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests/core/data-list/data-list.pw.spec.ts:55:28

Check failure on line 55 in projects/demo-playwright/tests/core/data-list/data-list.pw.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright / ubuntu-latest / 2 of 9

[chromium] › tests/core/data-list/data-list.pw.spec.ts:31:9 › DataList › Submenu 

  1) [chromium] › tests/core/data-list/data-list.pw.spec.ts:31:9 › DataList › Submenu ──────────────

    Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
    Error: expect(page).toHaveScreenshot(expected)

      101918 pixels (ratio 0.09 of all image pixels) are different.

    Expected: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/snapshots/tests/core/data-list/data-list.pw.spec.ts-snapshots/03-3-data-list-chromium-linux.png
    Received: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-core-data-list-data-list.pw-DataList-Submenu-chromium-retry1/03-3-data-list-actual.png
        Diff: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-core-data-list-data-list.pw-DataList-Submenu-chromium-retry1/03-3-data-list-diff.png

    Call log:
      - expect.toHaveScreenshot(03-3-data-list.png) with timeout 5000ms
        - verifying given screenshot expectation
      - taking page screenshot
        - disabled all CSS animations
      - waiting for fonts to load...
      - fonts loaded
      - 101918 pixels (ratio 0.09 of all image pixels) are different.
      - waiting 100ms before taking screenshot
      - taking page screenshot
        - disabled all CSS animations
      - waiting for fonts to load...
      - fonts loaded
      - captured a stable screenshot
      - 101918 pixels (ratio 0.09 of all image pixels) are different.


      53 |         await page.keyboard.down('ArrowRight');
      54 |
    > 55 |         await expect(page).toHaveScreenshot('03-3-data-list.png');
         |                            ^
      56 |
      57 |         await page.keyboard.down('ArrowDown');
      58 |         await page.keyboard.down('ArrowDown');
        at /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests/core/data-list/data-list.pw.spec.ts:55:28

Check failure on line 55 in projects/demo-playwright/tests/core/data-list/data-list.pw.spec.ts

View workflow job for this annotation

GitHub Actions / Playwright / ubuntu-latest / 2 of 9

[chromium] › tests/core/data-list/data-list.pw.spec.ts:31:9 › DataList › Submenu 

  1) [chromium] › tests/core/data-list/data-list.pw.spec.ts:31:9 › DataList › Submenu ──────────────

    Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
    Error: expect(page).toHaveScreenshot(expected)

      101918 pixels (ratio 0.09 of all image pixels) are different.

    Expected: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/snapshots/tests/core/data-list/data-list.pw.spec.ts-snapshots/03-3-data-list-chromium-linux.png
    Received: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-core-data-list-data-list.pw-DataList-Submenu-chromium-retry2/03-3-data-list-actual.png
        Diff: /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests-results/tests-core-data-list-data-list.pw-DataList-Submenu-chromium-retry2/03-3-data-list-diff.png

    Call log:
      - expect.toHaveScreenshot(03-3-data-list.png) with timeout 5000ms
        - verifying given screenshot expectation
      - taking page screenshot
        - disabled all CSS animations
      - waiting for fonts to load...
      - fonts loaded
      - 101918 pixels (ratio 0.09 of all image pixels) are different.
      - waiting 100ms before taking screenshot
      - taking page screenshot
        - disabled all CSS animations
      - waiting for fonts to load...
      - fonts loaded
      - captured a stable screenshot
      - 101918 pixels (ratio 0.09 of all image pixels) are different.


      53 |         await page.keyboard.down('ArrowRight');
      54 |
    > 55 |         await expect(page).toHaveScreenshot('03-3-data-list.png');
         |                            ^
      56 |
      57 |         await page.keyboard.down('ArrowDown');
      58 |         await page.keyboard.down('ArrowDown');
        at /home/runner/work/taiga-ui/taiga-ui/projects/demo-playwright/tests/core/data-list/data-list.pw.spec.ts:55:28

await page.keyboard.down('ArrowDown');
await page.keyboard.down('ArrowDown');
await page.keyboard.down('ArrowDown');

await expect(page).toHaveScreenshot('03-4-data-list.png');

await page.waitForTimeout(100);
await page.keyboard.down('Enter');
await page.waitForTimeout(100);

await expect(page).toHaveScreenshot('03-2-data-list.png');
await expect(page).toHaveScreenshot('03-5-data-list.png');

await page.keyboard.down('ArrowRight');

await expect(page).toHaveScreenshot('03-6-data-list.png');

await page.keyboard.down('ArrowDown');
await page.keyboard.down('ArrowDown');

await expect(page).toHaveScreenshot('03-3-data-list.png');
await expect(page).toHaveScreenshot('03-7-data-list.png');

await page.waitForTimeout(100);
await page.keyboard.down('Enter');
await page.waitForTimeout(100);

await expect(page).toHaveScreenshot('03-4-data-list.png');
await expect(page).toHaveScreenshot('03-8-data-list.png');
});

test('Form control', async ({page}) => {
Expand Down
4 changes: 1 addition & 3 deletions projects/kit/directives/data-list-dropdown-manager/data-list-dropdown-manager.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,8 +163,6 @@ export class TuiDataListDropdownManager implements AfterViewInit {
root: content,
});

if (item) {
item.focus();
}
item?.focus();
}
}
Loading