[PatchWidget] Refine scroll behavior in select workspace dialog - Prevent default scrollbar handling for arrow-down key presses. - Implement manual focus scrolling for incremental, item-by-item movement, avoiding the default centering behavior. Bug: 410714934 Change-Id: I5451fddbedc2f86d7d0738e80f46189847507c0b Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6459606 Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org> Reviewed-by: Wolfgang Beyer <wolfi@chromium.org> Auto-Submit: Ergün Erdoğmuş <ergunsh@chromium.org> Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
diff --git a/front_end/panels/ai_assistance/SelectWorkspaceDialog.test.ts b/front_end/panels/ai_assistance/SelectWorkspaceDialog.test.ts index 4380437..6480ac4 100644 --- a/front_end/panels/ai_assistance/SelectWorkspaceDialog.test.ts +++ b/front_end/panels/ai_assistance/SelectWorkspaceDialog.test.ts
@@ -79,12 +79,12 @@ it('listens to ArrowUp/Down', async () => { const {view} = await createComponent(); - view.input.onListItemKeyDown({key: 'ArrowDown', bubbles: true, composed: true} as KeyboardEvent); + view.input.onListItemKeyDown(new KeyboardEvent('keydown', {key: 'ArrowDown'})); let input = await view.nextInput; sinon.assert.callCount(view, 2); assert.strictEqual(input.selectedIndex, 1); - view.input.onListItemKeyDown({key: 'ArrowUp', bubbles: true, composed: true} as KeyboardEvent); + view.input.onListItemKeyDown(new KeyboardEvent('keydown', {key: 'ArrowUp'})); input = await view.nextInput; sinon.assert.callCount(view, 3); assert.strictEqual(input.selectedIndex, 0);
diff --git a/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts b/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts index 91b31de..00da3c3b 100644 --- a/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts +++ b/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts
@@ -188,16 +188,24 @@ #onListItemKeyDown(event: KeyboardEvent): void { switch (event.key) { - case 'ArrowDown': + case 'ArrowDown': { + event.preventDefault(); this.#selectedIndex = Math.min(this.#selectedIndex + 1, this.#folders.length - 1); - this.contentElement.querySelectorAll('li')[this.#selectedIndex]?.focus(); + const targetItem = this.contentElement.querySelectorAll('li')[this.#selectedIndex]; + targetItem?.scrollIntoView({block: 'nearest', inline: 'nearest'}); + targetItem?.focus({preventScroll: true}); this.requestUpdate(); break; - case 'ArrowUp': + } + case 'ArrowUp': { + event.preventDefault(); this.#selectedIndex = Math.max(this.#selectedIndex - 1, 0); - this.contentElement.querySelectorAll('li')[this.#selectedIndex]?.focus(); + const targetItem = this.contentElement.querySelectorAll('li')[this.#selectedIndex]; + targetItem?.scrollIntoView({block: 'nearest', inline: 'nearest'}); + targetItem?.focus({preventScroll: true}); this.requestUpdate(); break; + } case 'Enter': event.preventDefault(); this.#onSelectButtonClick();