@@ -614,8 +614,8 @@ export abstract class TextField extends textFieldBaseClass {
614
614
cols=${ this . cols }
615
615
.value=${ live ( this . value ) }
616
616
@change=${ this . redispatchEvent }
617
- @focusin =${ this . handleFocusin }
618
- @focusout =${ this . handleFocusout }
617
+ @focus =${ this . handleFocusChange }
618
+ @blur =${ this . handleFocusChange }
619
619
@input=${ this . handleInput }
620
620
@select=${ this . redispatchEvent } > </ textarea >
621
621
` ;
@@ -653,8 +653,8 @@ export abstract class TextField extends textFieldBaseClass {
653
653
type=${ this . type }
654
654
.value=${ live ( this . value ) }
655
655
@change=${ this . redispatchEvent }
656
- @focusin =${ this . handleFocusin }
657
- @focusout =${ this . handleFocusout }
656
+ @focus =${ this . handleFocusChange }
657
+ @blur =${ this . handleFocusChange }
658
658
@input=${ this . handleInput }
659
659
@select=${ this . redispatchEvent } />
660
660
${ suffix }
@@ -687,12 +687,12 @@ export abstract class TextField extends textFieldBaseClass {
687
687
return this . error ? this . errorText : this . nativeErrorText ;
688
688
}
689
689
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 ;
696
696
}
697
697
698
698
private handleInput ( event : InputEvent ) {
0 commit comments