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

fix(radio): do not clear value of radio group from radio (#20343)

Browse Source 
fixes #20323
This commit is contained in:
Liam DeBeasi
2020-01-30 12:29:11 -05:00
committed by GitHub
parent d693ca81f5
commit ff78e6e8ca
3 changed files with 108 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
core/src/components/radio-group/test/search/e2e.ts Normal file
View File

@ -0,0 +1,27 @@
import { newE2EPage } from '@stencil/core/testing';
test('radio-group: search', async () => {
const page = await newE2EPage({
url: '/src/components/radio-group/test/search?ionic:_testing=true'
});
const screenshotCompares = [];
screenshotCompares.push(await page.compareScreenshot());
const radioTwo = await page.find('ion-radio[value=two]');
await radioTwo.click();
const value = await page.find('#value');
expect(value.textContent).toEqual('Current value: two');
const searchbar = await page.find('ion-searchbar');
await searchbar.click();
await page.keyboard.type('zero');
const valueAgain = await page.find('#value');
expect(valueAgain.textContent).toEqual('Current value: two');
for (const screenshotCompare of screenshotCompares) {
expect(screenshotCompare).toMatchScreenshot();
}
});

81
core/src/components/radio-group/test/search/index.html Normal file
View File

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Radio Group - Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Radio Group - Form</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar placeholder="Type to filter..." debounce="0"></ion-searchbar>
</ion-toolbar>
<ion-toolbar>
<ion-note id="value">Current value:</ion-note>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content">
<ion-radio-group allow-empty-selection></ion-radio-group>
</ion-content>
<style>
ion-note {
padding: 0 10px;
}
</style>
<script>
const radioGroup = document.querySelector('ion-radio-group');
const searchbar = document.querySelector('ion-searchbar');
const currentValue = document.querySelector('#value');
radioGroup.addEventListener('ionChange', (ev) => {
currentValue.innerText = `Current value: ${ev.detail.value}`;
});
searchbar.addEventListener('ionChange', (ev) => {
filter(ev.detail.value);
});
const filter = (value) => {
const query = (value != null) ? value.toLowerCase() : '';
const data = [
{ id: 0, value: 'zero' },
{ id: 1, value: 'one' },
{ id: 2, value: 'two' },
{ id: 3, value: 'three' }
];
let html = '';
data.forEach(d => {
if (d.value.includes(query)) {
html += `
<ion-item>
<ion-label>Item ${d.value}</ion-label>
<ion-radio value="${d.value}"></ion-radio>
</ion-item>
`;
}
});
radioGroup.innerHTML = html;
}
filter();
</script>
</ion-app>
</body>
</html>

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

@ -81,9 +81,6 @@ export class Radio implements ComponentInterface {
const radioGroup = this.radioGroup; const radioGroup = this.radioGroup;
if (radioGroup) { if (radioGroup) {
radioGroup.removeEventListener('ionChange', this.updateState); radioGroup.removeEventListener('ionChange', this.updateState);
if (this.checked) {
radioGroup.value = undefined;
}
this.radioGroup = null; this.radioGroup = null;
} }
} }