fix(inputs): keyboard focus improvements (#16838)

fixes #16815
fixes #16872
fixes #13978
fixes #16610

core/src/components/select/select.tsx

@@ -18,6 +18,7 @@ export class Select implements ComponentInterface {
   private inputId = `ion-sel-${selectIds++}`;
   private overlay?: OverlaySelect;
   private didInit = false;
+  private buttonEl?: HTMLButtonElement;
 
   @Element() el!: HTMLIonSelectElement;
 
@@ -26,7 +27,6 @@ export class Select implements ComponentInterface {
   @Prop({ connect: 'ion-popover-controller' }) popoverCtrl!: HTMLIonPopoverControllerElement;
 
   @State() isExpanded = false;
-  @State() keyFocus = false;
 
   /**
    * The mode determines which platform styles to use.
@@ -138,6 +138,11 @@ export class Select implements ComponentInterface {
     }
   }
 
+  @Listen('click')
+  onClick() {
+    this.open();
+  }
+
   async componentDidLoad() {
     await this.loadOptions();
 
@@ -174,6 +179,7 @@ export class Select implements ComponentInterface {
     overlay.onDidDismiss().then(() => {
       this.overlay = undefined;
       this.isExpanded = false;
+      this.setFocus();
     });
     await overlay.present();
     return overlay;
@@ -353,6 +359,12 @@ export class Select implements ComponentInterface {
     return generateText(this.childOpts, this.value);
   }
 
+  private setFocus() {
+    if (this.buttonEl) {
+      this.buttonEl.focus();
+    }
+  }
+
   private emitStyle() {
     this.ionStyle.emit({
       'interactive': true,
@@ -364,20 +376,11 @@ export class Select implements ComponentInterface {
     });
   }
 
-  private onClick = (ev: UIEvent) => {
-    this.open(ev);
-  }
-
-  private onKeyUp = () => {
-    this.keyFocus = true;
-  }
-
   private onFocus = () => {
     this.ionFocus.emit();
   }
 
   private onBlur = () => {
-    this.keyFocus = false;
     this.ionBlur.emit();
   }
 
@@ -397,7 +400,6 @@ export class Select implements ComponentInterface {
       class: {
         'in-item': hostContext('ion-item', this.el),
         'select-disabled': this.disabled,
-        'select-key': this.keyFocus
       }
     };
   }
@@ -432,10 +434,10 @@ export class Select implements ComponentInterface {
       </div>,
       <button
         type="button"
-        onClick={this.onClick}
-        onKeyUp={this.onKeyUp}
         onFocus={this.onFocus}
         onBlur={this.onBlur}
+        disabled={this.disabled}
+        ref={(el => this.buttonEl = el)}
       >
       </button>
     ];