javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +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

10
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' url: '/src/components/textarea/test/basic?ionic:_testing=true'
}); });
const compare = await page.compareScreenshot(); 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(); expect(compare).toMatchScreenshot();
}
}); });

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

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