fix(datetime): keyboard navigation of time picker columns (#24251)

core/src/components.d.ts

@@ -1897,6 +1897,7 @@ export namespace Components {
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
         "keyboardClose": boolean;
+        "keyboardEvents": boolean;
         /**
           * Animation to use when the popover is dismissed.
          */
@@ -5525,6 +5526,7 @@ declare namespace LocalJSX {
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
         "keyboardClose"?: boolean;
+        "keyboardEvents"?: boolean;
         /**
           * Animation to use when the popover is dismissed.
          */

core/src/components/datetime/datetime.tsx

@@ -1350,6 +1350,9 @@ export class Datetime implements ComponentInterface {
         style={{
           '--offset-y': '-10px'
         }}
+        // Allow native browser keyboard events to support up/down/home/end key
+        // navigation within the time picker.
+        keyboardEvents
         ref={el => this.popoverRef = el}
       >
         {this.renderTimePicker(hoursItems, minutesItems, ampmItems, use24Hour)}

core/src/components/popover/popover.tsx

@@ -208,6 +208,19 @@ export class Popover implements ComponentInterface, PopoverInterface {
    */
   @Prop() isOpen = false;
 
+  /**
+   * @internal
+   *
+   * If `true` the popover will not register its own keyboard event handlers.
+   * This allows the contents of the popover to handle their own keyboard interactions.
+   *
+   * If `false`, the popover will register its own keyboard event handlers for
+   * navigating `ion-list` items within a popover (up/down/home/end/etc.).
+   * This will also cancel browser keyboard event bindings to prevent scroll
+   * behavior in a popover using a list of items.
+   */
+  @Prop() keyboardEvents = false;
+
   @Watch('trigger')
   @Watch('triggerAction')
   onTriggerChange() {
@@ -385,7 +398,9 @@ export class Popover implements ComponentInterface, PopoverInterface {
     this.usersElement = await attachComponent(delegate, this.el, this.component, ['popover-viewport'], data, inline);
     await deepReady(this.usersElement);
 
-    this.configureKeyboardInteraction();
+    if (!this.keyboardEvents) {
+      this.configureKeyboardInteraction();
+    }
     this.configureDismissInteraction();
 
     this.currentTransition = present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {

core/src/components/popover/utils.ts

@@ -372,6 +372,7 @@ export const configureKeyboardInteraction = (
        * ArrowDown should move focus to the next focusable ion-item.
        */
       case 'ArrowDown':
+        // Disable movement/scroll with keyboard
         ev.preventDefault();
         const nextItem = getNextItem(items, activeElement);
         // tslint:disable-next-line:strict-type-predicates
@@ -383,6 +384,7 @@ export const configureKeyboardInteraction = (
        * ArrowUp should move focus to the previous focusable ion-item.
        */
       case 'ArrowUp':
+        // Disable movement/scroll with keyboard
         ev.preventDefault();
         const prevItem = getPrevItem(items, activeElement);
         // tslint:disable-next-line:strict-type-predicates