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

fix(textarea): float label when a value is changed async (#18024)

Browse Source 
emits styles to the parent item on value change so that the item will get the proper class to float the label

fixes #17555 fixes #17559
This commit is contained in:
Brandy Carney
2019-04-12 13:23:04 -04:00
committed by GitHub
parent 1199c53437
commit 494991e9fb
3 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/src/components/textarea/test/basic/e2e.ts
View File

@@ -5,6 +5,14 @@ test('textarea: basic', async () => {
url: '/src/components/textarea/test/basic?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
const compares = [];
compares.push(await page.compareScreenshot());
page.waitFor(2000);
compares.push(await page.compareScreenshot('value changed'));
for (const compare of compares) {
expect(compare).toMatchScreenshot();
}
});

31
core/src/components/textarea/test/basic/index.html
View File

@@ -29,7 +29,7 @@
</ion-item>
<ion-item>
<ion-label color="primary" fixed>Fixed Label</ion-label>
<ion-label color="primary" position="fixed">Fixed Label</ion-label>
<ion-textarea placeholder="Textarea"></ion-textarea>
</ion-item>
@@ -38,13 +38,13 @@
</ion-item>
<ion-item>
<ion-label color="primary" stacked>Stacked Label</ion-label>
<ion-label color="primary" position="stacked">Stacked Label</ion-label>
<ion-textarea placeholder="Textarea"></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="primary" floating>Floating Label</ion-label>
<ion-textarea></ion-textarea>
<ion-label color="primary" position="floating">Floating Label</ion-label>
<ion-textarea id="timeout"></ion-textarea>
</ion-item>
<ion-item>
@@ -58,24 +58,14 @@
</ion-item>
<ion-item>
<ion-label>Dynamic Value</ion-label>
<ion-input id="dynamicValue" value="dynamic"></ion-input>
</ion-item>
<ion-item>
<ion-label>Dynamic Value</ion-label>
<ion-textarea id="dynamicTextareaValue" value="dynamic"></ion-textarea>
<ion-label position="floating">Dynamic Value</ion-label>
<ion-textarea id="dynamicValue" value="dynamic"></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="primary">Clear on Edit</ion-label>
<ion-textarea clear-on-edit="true"></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="primary">Clear on Edit</ion-label>
<ion-input clear-on-edit="true"></ion-input>
</ion-item>
</ion-list>
<div text-center>
@@ -87,17 +77,22 @@
Toggle Readonly
</ion-button>
<ion-button color="light" onclick="toggleString('dynamicValue', 'value'); toggleString('dynamicTextareaValue', 'value')">
<ion-button color="light" onclick="toggleString('dynamicValue', 'value');">
Toggle Value
</ion-button>
<ion-button color="danger" onclick="clearString('dynamicValue', 'value'); clearString('dynamicTextareaValue', 'value')">
<ion-button color="danger" onclick="clearString('dynamicValue', 'value');">
Clear Value
</ion-button>
</div>
</ion-content>
<script>
var textarea = document.getElementById('timeout');
setTimeout(() => {
textarea.value = 'timeout';
}, 1000);
function toggleBoolean(id, prop) {
var el = document.getElementById(id);

1
core/src/components/textarea/textarea.tsx
View File

@@ -134,6 +134,7 @@ export class Textarea implements ComponentInterface {
if (nativeInput && nativeInput.value !== value) {
nativeInput.value = value;
}
this.emitStyle();
this.ionChange.emit({ value });
}