javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(radio): fix radio not showing checked state when not in a group (#24423)

Browse Source
This commit is contained in:
Amanda Smith
2021-12-16 12:08:11 -06:00
committed by GitHub
parent ac3b110248
commit 94a781cb6a
3 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/radio/radio.tsx
View File

@ -22,6 +22,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
export class Radio implements ComponentInterface {
private inputId = `ion-rb-${radioButtonIds++}`;
private radioGroup: HTMLIonRadioGroupElement | null = null;
private nativeInput!: HTMLInputElement;
@Element() el!: HTMLIonRadioElement;
@ -128,6 +129,10 @@ export class Radio implements ComponentInterface {
}
}
private onClick = () => {
this.checked = this.nativeInput.checked;
};
private onFocus = () => {
this.ionFocus.emit();
}
@ -150,6 +155,7 @@ export class Radio implements ComponentInterface {
tabindex={buttonTabindex}
onFocus={this.onFocus}
onBlur={this.onBlur}
onClick={this.onClick}
class={createColorClasses(color, {
[mode]: true,
'in-item': hostContext('ion-item', el),
@ -171,6 +177,7 @@ export class Radio implements ComponentInterface {
disabled={disabled}
tabindex="-1"
id={inputId}
ref={el => this.nativeInput = el as HTMLInputElement}
/>
</Host>
);

8
core/src/components/radio/test/basic/e2e.ts
View File

@ -7,6 +7,14 @@ test('radio: basic', async () => {
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
const groupedRadio = await page.find('#groupedRadio');
await groupedRadio.click();
expect(groupedRadio).toHaveClass('radio-checked');
const ungroupedRadio = await page.find('#ungroupedRadio');
await ungroupedRadio.click();
expect(ungroupedRadio).toHaveClass('radio-checked');
});
test('radio:rtl: basic', async () => {

4
core/src/components/radio/test/basic/index.html
View File

@ -27,7 +27,7 @@
</ion-item-divider>
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-radio slot="start" value="pepperoni"></ion-radio>
<ion-radio slot="start" value="pepperoni" id="groupedRadio"></ion-radio>
</ion-item>
<ion-item>
@ -137,7 +137,7 @@
</ion-list-header>
<ion-item>
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
<ion-radio slot="start" color="secondary"></ion-radio>
<ion-radio slot="start" color="secondary" id="ungroupedRadio"></ion-radio>
</ion-item>
<ion-item>