material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 09:30:27 +03:00
Code Issues Projects Releases Wiki Activity

fix(textfield): focus style lost after reportValidity() during change

Browse Source 
PiperOrigin-RevId: 597047043
This commit is contained in:
Elizabeth Mitchell 2024-01-09 14:33:32 -08:00 committed by Copybara-Service
parent cef1b740ee
commit 6efc90403b
2 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
textfield/demo/stories.ts
View File

@ -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();
}

20
textfield/internal/text-field.ts
View File

@ -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) {