Skip to content
Permalink
Browse files

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

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
  • Loading branch information...
brandyscarney committed Apr 12, 2019
1 parent 1199c53 commit 494991e9fbb61b346390d1e40d756e22fb7c7741
@@ -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();
}
});
@@ -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);
@@ -134,6 +134,7 @@ export class Textarea implements ComponentInterface {
if (nativeInput && nativeInput.value !== value) {
nativeInput.value = value;
}
this.emitStyle();
this.ionChange.emit({ value });
}

0 comments on commit 494991e

Please sign in to comment.
You can’t perform that action at this time.