diff --git a/src/scripts/clipperUI/components/sectionPicker.tsx b/src/scripts/clipperUI/components/sectionPicker.tsx index 43339d23..e3ac26cd 100644 --- a/src/scripts/clipperUI/components/sectionPicker.tsx +++ b/src/scripts/clipperUI/components/sectionPicker.tsx @@ -54,6 +54,16 @@ export class SectionPickerClass extends ComponentBase { + let notebookList = document.getElementById("notebookList"); + if (notebookList) { + let firstTreeItem = notebookList.querySelector("li[role='treeitem']") as HTMLElement; + if (firstTreeItem) { + firstTreeItem.focus(); + } + } + }); } this.props.onPopupToggle(shouldNowBeOpen); } diff --git a/src/tests/clipperUI/components/sectionPicker_tests.tsx b/src/tests/clipperUI/components/sectionPicker_tests.tsx index 00a67e55..9c0abc85 100644 --- a/src/tests/clipperUI/components/sectionPicker_tests.tsx +++ b/src/tests/clipperUI/components/sectionPicker_tests.tsx @@ -882,6 +882,35 @@ export class SectionPickerSinonTests extends TestModule { done(); }); }); + + test("onPopupToggle should move focus to first tree item when dropdown opens", (assert: QUnitAssert) => { + let done = assert.async(); + + let clipperState = MockProps.getMockClipperState(); + let mockNotebooks = MockProps.getMockNotebooks(); + initializeClipperStorage(JSON.stringify(mockNotebooks), undefined, TestConstants.defaultUserInfoAsJsonString); + + let component = {}} + clipperState={clipperState} />; + MithrilUtils.mountToFixture(component); + + // Open the dropdown + MithrilUtils.simulateAction(() => { + document.getElementById(TestConstants.Ids.sectionLocationContainer).click(); + }); + + // Wait for requestAnimationFrame to complete + requestAnimationFrame(() => { + let notebookList = document.getElementById("notebookList"); + ok(notebookList, "Notebook list should be present when dropdown is open"); + if (notebookList) { + let firstTreeItem = notebookList.querySelector("li[role='treeitem']") as HTMLElement; + ok(firstTreeItem, "First tree item should exist in the notebook list"); + } + done(); + }); + }); } }