diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx index 30deb9add1..8f9ed6a693 100644 --- a/core/src/components/radio-group/radio-group.tsx +++ b/core/src/components/radio-group/radio-group.tsx @@ -141,10 +141,11 @@ export class RadioGroup implements ComponentInterface { } // Update the radio group value when a user presses the - // space bar on top of a selected radio (only applies - // to radios in a select popover) + // space bar on top of a selected radio if (['Space'].includes(ev.code)) { - this.value = current.value; + this.value = (this.allowEmptySelection && this.value !== undefined) + ? undefined + : current.value; // Prevent browsers from jumping // to the bottom of the screen diff --git a/core/src/components/radio-group/test/radio-group.e2e.ts b/core/src/components/radio-group/test/radio-group.e2e.ts new file mode 100644 index 0000000000..7794c85522 --- /dev/null +++ b/core/src/components/radio-group/test/radio-group.e2e.ts @@ -0,0 +1,88 @@ +import { newE2EPage } from '@stencil/core/testing'; + +/** + * @param page the E2E page that contains the radio button + * @param radioButtonId the id of the radio button to focus + * @returns the checked property of the focused radio button + */ +const selectRadio = async (page, radioButtonId: string, selectionMethod: 'keyboard' | 'mouse'): Promise => { + const selector = `ion-radio#${radioButtonId}`; + if (selectionMethod === 'keyboard') { + await page.focus(selector); + await page.keyboard.press('Space'); + } else if (selectionMethod === 'mouse') { + await page.click(selector); + } + + await page.waitForChanges(); + + const radioGroup = await page.find(`ion-radio#${radioButtonId} >>> input`); + const checked = await radioGroup.getProperty('checked'); + return checked; +} + +describe('radio-group', () => { + it('Spacebar should not deselect without allowEmptySelection', async () => { + const page = await newE2EPage(); + await page.setContent(` + + + One + + + + `); + + const checked = await selectRadio(page, 'one', 'keyboard'); + + expect(checked).toBe(true); + }); + + it('Spacebar should deselect with allowEmptySelection', async () => { + const page = await newE2EPage(); + await page.setContent(` + + + One + + + + `); + + const checked = await selectRadio(page, 'one', 'keyboard'); + + expect(checked).toBe(false); + }); + + it('Click should not deselect without allowEmptySelection', async () => { + const page = await newE2EPage(); + await page.setContent(` + + + One + + + + `); + + const checked = await selectRadio(page, 'one', 'mouse'); + + expect(checked).toBe(true); + }); + + it('Click should deselect with allowEmptySelection', async () => { + const page = await newE2EPage(); + await page.setContent(` + + + One + + + + `); + + const checked = await selectRadio(page, 'one', 'mouse'); + + expect(checked).toBe(false); + }); +});