mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
fix(textfield): focus style lost after reportValidity()
during change
PiperOrigin-RevId: 597047043
This commit is contained in:
parent
cef1b740ee
commit
6efc90403b
@ -229,11 +229,6 @@ const forms: MaterialStoryInit<StoryKnobs> = {
|
||||
|
||||
async function reportValidity(event: Event) {
|
||||
const textField = event.target as MdFilledTextField;
|
||||
// Calling reportValidity() will focus the text field. Since we do this on
|
||||
// "change" (blur), wait for other focus changes to finish, like tabbing.
|
||||
await new Promise<void>((resolve) => {
|
||||
setTimeout(resolve);
|
||||
});
|
||||
textField.reportValidity();
|
||||
}
|
||||
|
||||
|
@ -614,8 +614,8 @@ export abstract class TextField extends textFieldBaseClass {
|
||||
cols=${this.cols}
|
||||
.value=${live(this.value)}
|
||||
@change=${this.redispatchEvent}
|
||||
@focusin=${this.handleFocusin}
|
||||
@focusout=${this.handleFocusout}
|
||||
@focus=${this.handleFocusChange}
|
||||
@blur=${this.handleFocusChange}
|
||||
@input=${this.handleInput}
|
||||
@select=${this.redispatchEvent}></textarea>
|
||||
`;
|
||||
@ -653,8 +653,8 @@ export abstract class TextField extends textFieldBaseClass {
|
||||
type=${this.type}
|
||||
.value=${live(this.value)}
|
||||
@change=${this.redispatchEvent}
|
||||
@focusin=${this.handleFocusin}
|
||||
@focusout=${this.handleFocusout}
|
||||
@focus=${this.handleFocusChange}
|
||||
@blur=${this.handleFocusChange}
|
||||
@input=${this.handleInput}
|
||||
@select=${this.redispatchEvent} />
|
||||
${suffix}
|
||||
@ -687,12 +687,12 @@ export abstract class TextField extends textFieldBaseClass {
|
||||
return this.error ? this.errorText : this.nativeErrorText;
|
||||
}
|
||||
|
||||
private handleFocusin() {
|
||||
this.focused = true;
|
||||
}
|
||||
|
||||
private handleFocusout() {
|
||||
this.focused = false;
|
||||
private handleFocusChange() {
|
||||
// When calling focus() or reportValidity() during change, it's possible
|
||||
// for blur to be called after the new focus event. Rather than set
|
||||
// `this.focused` to true/false on focus/blur, we always set it to whether
|
||||
// or not the input itself is focused.
|
||||
this.focused = this.inputOrTextarea?.matches(':focus') ?? false;
|
||||
}
|
||||
|
||||
private handleInput(event: InputEvent) {
|
||||
|
Loading…
Reference in New Issue
Block a user