From 8bdcd3c6c99d84a0a46b0f08dceca6b6929fd8f8 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 1 Dec 2021 11:57:51 -0500
Subject: [PATCH] fix(datetime): keyboard navigation of time picker columns
 (#24251)

---
 core/src/components.d.ts                  |  2 ++
 core/src/components/datetime/datetime.tsx |  3 +++
 core/src/components/popover/popover.tsx   | 17 ++++++++++++++++-
 core/src/components/popover/utils.ts      |  2 ++
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 7afe68c7b6..3fce14fd10 100644
--- a/core/src/components.d.ts
+++ b/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.
          */
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index fe1ece975f..30be9e5656 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/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)}
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index ec2c723ce4..508f3683c6 100644
--- a/core/src/components/popover/popover.tsx
+++ b/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, {
diff --git a/core/src/components/popover/utils.ts b/core/src/components/popover/utils.ts
index 6c78fc44c9..296a373234 100644
--- a/core/src/components/popover/utils.ts
+++ b/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