Skip to content

Commit 6efc904

Browse files
asynclizcopybara-github
authored andcommitted
fix(textfield): focus style lost after reportValidity() during change
PiperOrigin-RevId: 597047043
1 parent cef1b74 commit 6efc904

File tree

2 files changed

+10
-15
lines changed

2 files changed

+10
-15
lines changed

textfield/demo/stories.ts

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -229,11 +229,6 @@ const forms: MaterialStoryInit<StoryKnobs> = {
229229

230230
async function reportValidity(event: Event) {
231231
const textField = event.target as MdFilledTextField;
232-
// Calling reportValidity() will focus the text field. Since we do this on
233-
// "change" (blur), wait for other focus changes to finish, like tabbing.
234-
await new Promise<void>((resolve) => {
235-
setTimeout(resolve);
236-
});
237232
textField.reportValidity();
238233
}
239234

textfield/internal/text-field.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -614,8 +614,8 @@ export abstract class TextField extends textFieldBaseClass {
614614
cols=${this.cols}
615615
.value=${live(this.value)}
616616
@change=${this.redispatchEvent}
617-
@focusin=${this.handleFocusin}
618-
@focusout=${this.handleFocusout}
617+
@focus=${this.handleFocusChange}
618+
@blur=${this.handleFocusChange}
619619
@input=${this.handleInput}
620620
@select=${this.redispatchEvent}></textarea>
621621
`;
@@ -653,8 +653,8 @@ export abstract class TextField extends textFieldBaseClass {
653653
type=${this.type}
654654
.value=${live(this.value)}
655655
@change=${this.redispatchEvent}
656-
@focusin=${this.handleFocusin}
657-
@focusout=${this.handleFocusout}
656+
@focus=${this.handleFocusChange}
657+
@blur=${this.handleFocusChange}
658658
@input=${this.handleInput}
659659
@select=${this.redispatchEvent} />
660660
${suffix}
@@ -687,12 +687,12 @@ export abstract class TextField extends textFieldBaseClass {
687687
return this.error ? this.errorText : this.nativeErrorText;
688688
}
689689

690-
private handleFocusin() {
691-
this.focused = true;
692-
}
693-
694-
private handleFocusout() {
695-
this.focused = false;
690+
private handleFocusChange() {
691+
// When calling focus() or reportValidity() during change, it's possible
692+
// for blur to be called after the new focus event. Rather than set
693+
// `this.focused` to true/false on focus/blur, we always set it to whether
694+
// or not the input itself is focused.
695+
this.focused = this.inputOrTextarea?.matches(':focus') ?? false;
696696
}
697697

698698
private handleInput(event: InputEvent) {

0 commit comments

Comments
 (0)