kopia lustrzana https://github.com/shoelace-style/shoelace
fix up/down focus in dropdown; closes #1472
rodzic
75b2da9eab
commit
2c883d4e59
|
@ -237,6 +237,7 @@ kbd {
|
||||||
border: solid 1px var(--sl-color-neutral-200);
|
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);
|
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-family: var(--sl-font-mono);
|
||||||
|
font-size: 0.9125em;
|
||||||
border-radius: var(--docs-border-radius);
|
border-radius: var(--docs-border-radius);
|
||||||
color: var(--sl-color-neutral-800);
|
color: var(--sl-color-neutral-800);
|
||||||
padding: 0.125em 0.4em;
|
padding: 0.125em 0.4em;
|
||||||
|
|
|
@ -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).
|
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
|
## 2.6.0
|
||||||
|
|
||||||
- Added JSDoc comments to React Wrappers for better documentation when hovering a component. [#1450]
|
- Added JSDoc comments to React Wrappers for better documentation when hovering a component. [#1450]
|
||||||
|
|
|
@ -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
|
// 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.
|
// key again to hide the menu in case they don't want to make a selection.
|
||||||
if ([' ', 'Enter'].includes(event.key)) {
|
if ([' ', 'Enter'].includes(event.key)) {
|
||||||
|
@ -238,6 +238,9 @@ export default class SlDropdown extends ShoelaceElement {
|
||||||
// Show the menu if it's not already open
|
// Show the menu if it's not already open
|
||||||
if (!this.open) {
|
if (!this.open) {
|
||||||
this.show();
|
this.show();
|
||||||
|
|
||||||
|
// Wait for the dropdown to open before focusing, but not the animation
|
||||||
|
await this.updateComplete;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (menuItems.length > 0) {
|
if (menuItems.length > 0) {
|
||||||
|
|
|
@ -162,7 +162,7 @@ describe('<sl-dropdown>', () => {
|
||||||
expect(el.open).to.be.true;
|
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`
|
const el = await fixture<SlDropdown>(html`
|
||||||
<sl-dropdown>
|
<sl-dropdown>
|
||||||
<sl-button slot="trigger" caret>Toggle</sl-button>
|
<sl-button slot="trigger" caret>Toggle</sl-button>
|
||||||
|
@ -173,12 +173,35 @@ describe('<sl-dropdown>', () => {
|
||||||
</sl-dropdown>
|
</sl-dropdown>
|
||||||
`);
|
`);
|
||||||
const trigger = el.querySelector('sl-button')!;
|
const trigger = el.querySelector('sl-button')!;
|
||||||
|
const firstMenuItem = el.querySelectorAll('sl-menu-item')[0];
|
||||||
|
|
||||||
trigger.focus();
|
trigger.focus();
|
||||||
await sendKeys({ press: 'ArrowDown' });
|
await sendKeys({ press: 'ArrowDown' });
|
||||||
await el.updateComplete;
|
await el.updateComplete;
|
||||||
|
|
||||||
expect(el.open).to.be.true;
|
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 () => {
|
it('should navigate to first focusable item on arrow navigation', async () => {
|
||||||
|
|
Ładowanie…
Reference in New Issue