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(); }