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

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

core/src/components/datetime/datetime.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch } from '@stencil/core';
 
 import { DatetimeChangeEventDetail, DatetimeOptions, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEventDetail } from '../../interface';
 import { clamp, findItemLabel, renderHiddenInput } from '../../utils/helpers';
@@ -15,16 +15,17 @@ import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convert
   shadow: true
 })
 export class Datetime implements ComponentInterface {
+
   private inputId = `ion-dt-${datetimeIds++}`;
   private locale: LocaleData = {};
   private datetimeMin: DatetimeData = {};
   private datetimeMax: DatetimeData = {};
   private datetimeValue: DatetimeData = {};
+  private buttonEl?: HTMLButtonElement;
 
   @Element() el!: HTMLIonDatetimeElement;
 
   @State() isExpanded = false;
-  @State() keyFocus = false;
 
   @Prop({ connect: 'ion-picker-controller' }) pickerCtrl!: HTMLIonPickerControllerElement;
 
@@ -238,6 +239,11 @@ export class Datetime implements ComponentInterface {
     this.emitStyle();
   }
 
+  @Listen('click')
+  onClick() {
+    this.open();
+  }
+
   /**
    * Opens the datetime overlay.
    */
@@ -252,6 +258,7 @@ export class Datetime implements ComponentInterface {
     this.isExpanded = true;
     picker.onDidDismiss().then(() => {
       this.isExpanded = false;
+      this.setFocus();
     });
     await this.validate(picker);
     await picker.present();
@@ -522,12 +529,10 @@ export class Datetime implements ComponentInterface {
     return Object.keys(val).length > 0;
   }
 
-  private onClick = () => {
-    this.open();
-  }
-
-  private onKeyUp = () => {
-    this.keyFocus = true;
+  private setFocus() {
+    if (this.buttonEl) {
+      this.buttonEl.focus();
+    }
   }
 
   private onFocus = () => {
@@ -535,30 +540,31 @@ export class Datetime implements ComponentInterface {
   }
 
   private onBlur = () => {
-    this.keyFocus = false;
     this.ionBlur.emit();
   }
 
   hostData() {
+    const { inputId, disabled, isExpanded, el, placeholder } = this;
+
     const addPlaceholderClass =
-      (this.getText() === undefined && this.placeholder != null) ? true : false;
+      (this.getText() === undefined && placeholder != null) ? true : false;
 
-    const labelId = this.inputId + '-lbl';
-    const label = findItemLabel(this.el);
+    const labelId = inputId + '-lbl';
+    const label = findItemLabel(el);
     if (label) {
       label.id = labelId;
     }
 
     return {
       'role': 'combobox',
-      'aria-disabled': this.disabled ? 'true' : null,
-      'aria-expanded': `${this.isExpanded}`,
+      'aria-disabled': disabled ? 'true' : null,
+      'aria-expanded': `${isExpanded}`,
       'aria-haspopup': 'true',
       'aria-labelledby': labelId,
       class: {
-        'datetime-disabled': this.disabled,
+        'datetime-disabled': disabled,
         'datetime-placeholder': addPlaceholderClass,
-        'in-item': hostContext('ion-item', this.el)
+        'in-item': hostContext('ion-item', el)
       }
     };
   }
@@ -576,10 +582,10 @@ export class Datetime implements ComponentInterface {
       <div class="datetime-text">{datetimeText}</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>
     ];