mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
Merge pull request #539 from 43081j:textfield-values
PiperOrigin-RevId: 273422771
This commit is contained in:
commit
7ac01425a4
@ -250,6 +250,11 @@ export abstract class TextFieldBase extends FormElement {
|
||||
if (maxLengthBecameDefined || maxLengthBecameUndefined) {
|
||||
this.createFoundation();
|
||||
}
|
||||
|
||||
if (changedProperties.has('value') &&
|
||||
changedProperties.get('value') !== undefined) {
|
||||
this.mdcFoundation.setValue(this.value);
|
||||
}
|
||||
}
|
||||
|
||||
protected renderInput() {
|
||||
|
@ -15,6 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {cssClasses as floatingClasses} from '@material/floating-label/constants';
|
||||
import {FloatingLabel} from '@material/mwc-floating-label';
|
||||
import {TextField} from '@material/mwc-textfield';
|
||||
import {cssClasses} from '@material/textfield/constants';
|
||||
@ -57,6 +58,10 @@ const makeOutlined = (isHidden: boolean) => html`
|
||||
</mwc-textfield>
|
||||
`;
|
||||
|
||||
const withLabel = html`
|
||||
<mwc-textfield label="a label"></mwc-textfield>
|
||||
`;
|
||||
|
||||
const isUiInvalid = (element: TextField) => {
|
||||
return !!element.shadowRoot!.querySelector(`.${cssClasses.INVALID}`);
|
||||
};
|
||||
@ -491,4 +496,34 @@ suite('mwc-textfield:', () => {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
suite('label', () => {
|
||||
let element: TextField;
|
||||
|
||||
setup(async () => {
|
||||
fixt = await fixture(withLabel);
|
||||
element = fixt.root.querySelector('mwc-textfield')!;
|
||||
await element.updateComplete;
|
||||
});
|
||||
|
||||
teardown(() => {
|
||||
if (fixt) {
|
||||
fixt.remove();
|
||||
}
|
||||
});
|
||||
|
||||
test('label floats when value is set', async () => {
|
||||
const floatingLabel =
|
||||
element.shadowRoot!.querySelector('label') as FloatingLabel;
|
||||
|
||||
assert.isFalse(
|
||||
floatingLabel.classList.contains(floatingClasses.LABEL_FLOAT_ABOVE));
|
||||
|
||||
element.value = 'foo bar';
|
||||
await element.updateComplete;
|
||||
|
||||
assert.isTrue(
|
||||
floatingLabel.classList.contains(floatingClasses.LABEL_FLOAT_ABOVE));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user