Fixed #12412

craftcms · Dec 12, 2022 · 50b5dcf · 50b5dcf
1 parent 3521bb7
commit 50b5dcf
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Release Notes for Craft CMS 3.x
 
+## Unreleased
+
+- Fixed a bug where it wasn’t possible to enter `0` in Number fields and numeric column cells within editable tables, using certain keyboard layouts. ([#12412](https://github.com/craftcms/cms/issues/12412))
+- Added `Craft.filterInputVal()`.
+- Added `Craft.filterNumberInputVal()`.
+
 ## 3.7.61 - 2022-11-17
 
 - Fixed an error that occurred if an arrow function was passed to the `|sort` Twig filter. ([#12334](https://github.com/craftcms/cms/issues/12334))

diff --git a/src/fields/Number.php b/src/fields/Number.php
@@ -294,24 +294,9 @@ protected function inputHtml($value, ElementInterface $element = null): string
 
         $js = <<<JS
 (function() {
-    \$('#$namespacedId').on('keydown', ev => {
-        if (
-            !Garnish.isCtrlKeyPressed(ev) &&
-            ![
-                9, // tab,
-                13, // return / enter
-                27, // esc
-                8, 46, // backspace, delete
-                37, 38, 39, 40, // arrows
-                173, 189, 109, // minus, subtract
-                190, 110, // period, decimal
-                188, // comma
-                48, 49, 50, 51, 52, 53, 54, 55, 56, 57, // 0-9
-                96, 97, 98, 99, 100, 101, 102, 103, 104, 105, // numpad 0-9
-            ].includes(ev.which)
-        ) {
-            ev.preventDefault();
-        }
+    const input = \$('#$namespacedId');
+    input.on('input', () => {
+        Craft.filterNumberInputVal(input);
     });
 })();
 JS;

diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js
diff --git a/src/web/assets/cp/dist/cp.js.map b/src/web/assets/cp/dist/cp.js.map
diff --git a/src/web/assets/cp/src/js/Craft.js b/src/web/assets/cp/src/js/Craft.js
@@ -2109,6 +2109,38 @@ $.extend(Craft, {
   setFocusWithin: function (container) {
     Garnish.setFocusWithin(container);
   },
+
+  /**
+   * Reduces an input’s value to characters that match the given regex pattern.
+   * @param {jQuery|HTMLElement} input
+   * @param {RegExp} regex
+   */
+  filterInputVal: function (input, regex) {
+    const $input = $(input);
+    const val = $input.val();
+    let selectionStart = $input[0].selectionStart;
+    let newVal = '';
+    for (let i = 0; i < val.length; i++) {
+      if (val[i].match(regex)) {
+        newVal += val[i];
+      } else if (i < selectionStart) {
+        selectionStart--;
+      }
+    }
+    if (newVal !== val) {
+      $input.val(newVal);
+      $input[0].setSelectionRange(selectionStart, selectionStart);
+    }
+  },
+
+  /**
+   * Reduces an input’s value to numeric characters.
+   * @param {jQuery|HTMLElement} input
+   * @param {RegExp} regex
+   */
+  filterNumberInputVal: function (input) {
+    this.filterInputVal(input, /[0-9.,\-]/);
+  },
 });
 
 // -------------------------------------------

diff --git a/src/web/assets/cp/src/js/EditableTable.js b/src/web/assets/cp/src/js/EditableTable.js
@@ -792,15 +792,6 @@ Craft.EditableTable.Row = Garnish.Base.extend(
         }
         return;
       }
-
-      // Was this an invalid number character?
-      if (
-        ev.data.type === 'number' &&
-        !ctrl &&
-        !Craft.inArray(keyCode, Craft.EditableTable.Row.numericKeyCodes)
-      ) {
-        ev.preventDefault();
-      }
     },
 
     handlePaste: function (ev) {
@@ -820,22 +811,13 @@ Craft.EditableTable.Row = Garnish.Base.extend(
         return;
       }
 
-      var safeValue;
-
       if (ev.data.type === 'number') {
-        // Only grab the number at the beginning of the value (if any)
-        var match = ev.currentTarget.value.match(/^\s*(-?[\d\\.]*)/);
-
-        if (match !== null) {
-          safeValue = match[1];
-        } else {
-          safeValue = '';
-        }
-      } else {
-        // Just strip any newlines
-        safeValue = ev.currentTarget.value.replace(/[\r\n]/g, '');
+        Craft.filterNumberInputVal(ev.currentTarget);
+        return;
       }
 
+      // Strip any newlines
+      const safeValue = ev.currentTarget.value.replace(/[\r\n]/g, '');
       if (safeValue !== ev.currentTarget.value) {
         ev.currentTarget.value = safeValue;
       }
@@ -870,6 +852,7 @@ Craft.EditableTable.Row = Garnish.Base.extend(
     },
   },
   {
+    /** @deprecated */
     numericKeyCodes: [
       9 /* (tab) */, 8 /* (delete) */, 37, 38, 39, 40 /* (arrows) */, 45,
       91 /* (minus) */, 46, 190 /* period */, 48, 49, 50, 51, 52, 53, 54, 55,