From bea41e975dbd8771698b32809692c95e820479bb Mon Sep 17 00:00:00 2001
From: YashRE42 <33805964+YashRE42@users.noreply.github.com>
Date: Wed, 15 Dec 2021 13:04:11 +0530
Subject: [PATCH] compose: Fix numeric typing regression related to global time
 widget.

In commit 1d54b383bd471af0a45a96b2dcf8d62aec60f516 we introduced some
changes to add better support for keyboard navigation with the global
time widget. Unfortunately, as a result of the fact that
get_keydown_hotkey returns undefined for numeric keys, we caused a
regression that prevented users from typing into the time picker.
Additionally, we also lost support for the backspace and delete keys.

Hence, this commit fixes the above bug by early returning in two
places if the key pressed is backspace, or delete or a numeric key.
---
 static/js/composebox_typeahead.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/static/js/composebox_typeahead.js b/static/js/composebox_typeahead.js
index 6f03bc5f58..eff9c2c35d 100644
--- a/static/js/composebox_typeahead.js
+++ b/static/js/composebox_typeahead.js
@@ -768,6 +768,10 @@ export function content_highlighter(item) {
     }
 }
 
+function is_numeric_key(key) {
+    return ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(key);
+}
+
 export function show_flatpickr(element, callback, default_timestamp, options = {}) {
     const flatpickr_input = $("<input id='#timestamp_flatpickr'>");
 
@@ -788,8 +792,18 @@ export function show_flatpickr(element, callback, default_timestamp, options = {
         formatDate: (date) => formatISO(date),
         disableMobile: true,
         onKeyDown: (selectedDates, dateStr, instance, event) => {
+            if (is_numeric_key(event.key)) {
+                // Don't stopPropagation for numeric inputs, let them be handled normally
+                return;
+            }
+
             const hotkey = get_keydown_hotkey(event);
 
+            if (hotkey === "backspace" || hotkey === "delete") {
+                // Don't stopPropagation for backspace or delete, let them be handled normally
+                return;
+            }
+
             if (["tab", "shift_tab"].includes(hotkey.name)) {
                 const elems = [
                     instance.selectedDateElem,
@@ -815,12 +829,20 @@ export function show_flatpickr(element, callback, default_timestamp, options = {
     const container = $($(instance.innerContainer).parent());
 
     container.on("keydown", (e) => {
+        if (is_numeric_key(e.key)) {
+            return true; // Let users type numeric values
+        }
+
         const hotkey = get_keydown_hotkey(e);
 
         if (!hotkey) {
             return false;
         }
 
+        if (hotkey.name === "backspace" || hotkey.name === "delete") {
+            return true; // Let backspace or delete be handled normally
+        }
+
         if (hotkey.name === "enter") {
             if (e.target.classList[0] === "flatpickr-day") {
                 return true; // use flatpickr default implementation