fix up/down focus in dropdown; closes #1472 (#1481)

docs/assets/styles/docs.css

@@ -237,6 +237,7 @@ kbd {
   border: solid 1px var(--sl-color-neutral-200);
   box-shadow: inset 0 1px 0 0 var(--sl-color-neutral-0), inset 0 -1px 0 0 var(--sl-color-neutral-200);
   font-family: var(--sl-font-mono);
+  font-size: 0.9125em;
   border-radius: var(--docs-border-radius);
   color: var(--sl-color-neutral-800);
   padding: 0.125em 0.4em;

docs/pages/resources/changelog.md

@@ -12,6 +12,10 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
 
+## Next
+
+- Fixed a bug in `<sl-dropdown>` where pressing [[Up]] or [[Down]] when focused on the trigger wouldn't focus the first/last menu items [#1472]
+
 ## 2.6.0
 
 - Added JSDoc comments to React Wrappers for better documentation when hovering a component. [#1450]

src/components/dropdown/dropdown.component.ts

@@ -213,7 +213,7 @@ export default class SlDropdown extends ShoelaceElement {
     }
   }
 
-  handleTriggerKeyDown(event: KeyboardEvent) {
+  async handleTriggerKeyDown(event: KeyboardEvent) {
     // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
     // key again to hide the menu in case they don't want to make a selection.
     if ([' ', 'Enter'].includes(event.key)) {
@@ -238,6 +238,9 @@ export default class SlDropdown extends ShoelaceElement {
         // Show the menu if it's not already open
         if (!this.open) {
           this.show();
+
+          // Wait for the dropdown to open before focusing, but not the animation
+          await this.updateComplete;
         }
 
         if (menuItems.length > 0) {

src/components/dropdown/dropdown.test.ts

@@ -162,7 +162,7 @@ describe('<sl-dropdown>', () => {
     expect(el.open).to.be.true;
   });
 
-  it('should open on arrow navigation', async () => {
+  it('should open on arrow down navigation', async () => {
     const el = await fixture<SlDropdown>(html`
       <sl-dropdown>
         <sl-button slot="trigger" caret>Toggle</sl-button>
@@ -173,12 +173,35 @@ describe('<sl-dropdown>', () => {
       </sl-dropdown>
     `);
     const trigger = el.querySelector('sl-button')!;
+    const firstMenuItem = el.querySelectorAll('sl-menu-item')[0];
 
     trigger.focus();
     await sendKeys({ press: 'ArrowDown' });
     await el.updateComplete;
 
     expect(el.open).to.be.true;
+    expect(document.activeElement).to.equal(firstMenuItem);
+  });
+
+  it('should open on arrow up navigation', async () => {
+    const el = await fixture<SlDropdown>(html`
+      <sl-dropdown>
+        <sl-button slot="trigger" caret>Toggle</sl-button>
+        <sl-menu>
+          <sl-menu-item>Item 1</sl-menu-item>
+          <sl-menu-item>Item 2</sl-menu-item>
+        </sl-menu>
+      </sl-dropdown>
+    `);
+    const trigger = el.querySelector('sl-button')!;
+    const secondMenuItem = el.querySelectorAll('sl-menu-item')[1];
+
+    trigger.focus();
+    await sendKeys({ press: 'ArrowUp' });
+    await el.updateComplete;
+
+    expect(el.open).to.be.true;
+    expect(document.activeElement).to.equal(secondMenuItem);
   });
 
   it('should navigate to first focusable item on arrow navigation', async () => {