From 897d9775c2143dd3b8d07deab35dfe90decd1336 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Thu, 30 Nov 2023 16:05:17 -0800
Subject: [PATCH] fix(select): focus() delegates properly, focus on reporting
 validity

PiperOrigin-RevId: 586815117
---
 select/internal/select.ts | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/select/internal/select.ts b/select/internal/select.ts
index 77ab964913..ace0382217 100644
--- a/select/internal/select.ts
+++ b/select/internal/select.ts
@@ -73,6 +73,12 @@ export abstract class Select extends selectBaseClass {
     requestUpdateOnAriaChange(Select);
   }
 
+  /** @nocollapse */
+  static override shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
   /**
    * Opens the menu synchronously with no animation.
    */
@@ -235,6 +241,16 @@ export abstract class Select extends selectBaseClass {
   @queryAssignedElements({slot: 'leading-icon', flatten: true})
   private readonly leadingIcons!: Element[];
 
+  constructor() {
+    super();
+    if (isServer) {
+      return;
+    }
+
+    this.addEventListener('focus', this.handleFocus.bind(this));
+    this.addEventListener('blur', this.handleBlur.bind(this));
+  }
+
   /**
    * Selects an option given the value of the option, and updates MdSelect's
    * value.
@@ -277,7 +293,13 @@ export abstract class Select extends selectBaseClass {
       return;
     }
 
-    invalidEvent?.preventDefault();
+    if (invalidEvent) {
+      // Prevent default pop-up behavior. This also prevents focusing, so we
+      // manually focus.
+      invalidEvent.preventDefault();
+      this.focus();
+    }
+
     const prevMessage = this.getErrorText();
     this.nativeError = !!invalidEvent;
     this.nativeErrorText = this.validationMessage;
@@ -362,9 +384,7 @@ export abstract class Select extends selectBaseClass {
           supporting-text=${this.supportingText}
           error-text=${this.getErrorText()}
           @keydown=${this.handleKeydown}
-          @click=${this.handleClick}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}>
+          @click=${this.handleClick}>
          ${this.renderFieldContent()}
          <div id="description" slot="aria-describedby"></div>
       </${this.fieldTag}>`;