From 76df2fd20421ba72c2739772d499353fdff11f69 Mon Sep 17 00:00:00 2001 From: Shanyu Cui Date: Fri, 16 Jul 2021 02:03:02 -0700 Subject: [PATCH 1/2] update hasSlot selector to search top-level only --- src/utilities/slot.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utilities/slot.ts b/src/utilities/slot.ts index e1041281..947de1dd 100644 --- a/src/utilities/slot.ts +++ b/src/utilities/slot.ts @@ -43,7 +43,7 @@ export function getTextContent(slot: HTMLSlotElement): string { export function hasSlot(el: HTMLElement, name?: string) { // Look for a named slot if (name) { - return el.querySelector(`[slot="${name}"]`) !== null; + return el.querySelector(`:scope > [slot="${name}"]`) !== null; } // Look for a default slot From 7d1373a1d1fefe29074ad60fc8ce775977a749d6 Mon Sep 17 00:00:00 2001 From: Shanyu Cui Date: Mon, 4 Oct 2021 23:27:28 -0700 Subject: [PATCH 2/2] radio: emit sl-change when toggled via arrow keys --- src/components/radio/radio.test.ts | 20 +++++++++++++++++++- src/components/radio/radio.ts | 1 + 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/components/radio/radio.test.ts b/src/components/radio/radio.test.ts index bf90ec53..f76c1288 100644 --- a/src/components/radio/radio.test.ts +++ b/src/components/radio/radio.test.ts @@ -3,6 +3,7 @@ import { sendKeys } from '@web/test-runner-commands'; import '../../../dist/shoelace.js'; import type SlRadio from './radio'; +import type SlRadioGroup from '../radio-group/radio-group'; describe('', () => { it('should be disabled with the disabled attribute', async () => { @@ -26,7 +27,7 @@ describe('', () => { expect(el.checked).to.be.true; }); - it('should fire sl-change when toggled via keyboard', async () => { + it('should fire sl-change when toggled via keyboard - space', async () => { const el = await fixture(html` `); const input = el.shadowRoot?.querySelector('input'); input.focus(); @@ -36,6 +37,23 @@ describe('', () => { expect(el.checked).to.be.true; }); + it('should fire sl-change when toggled via keyboard - arrow key', async () => { + const radioGroup = await fixture(html` + + + + + `); + const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1'); + const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2'); + const input1 = radio1.shadowRoot?.querySelector('input'); + input1.focus(); + setTimeout(() => sendKeys({ press: 'ArrowRight' })); + const event = await oneEvent(radio2, 'sl-change'); + expect(event.target).to.equal(radio2); + expect(radio2.checked).to.be.true; + }); + it('should not fire sl-change when checked is set by javascript', async () => { const el = await fixture(html` `); el.addEventListener('sl-change', () => expect.fail('event fired')); diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index 69ce5384..79690c20 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -136,6 +136,7 @@ export default class SlRadio extends LitElement { this.getAllRadios().map(radio => (radio.checked = false)); radios[index].focus(); radios[index].checked = true; + emit(radios[index], 'sl-change'); event.preventDefault(); }