Merge pull request #1485 from colouring-cities/number-input-fixes

Fix for number input fields
colouring-cities · Feb 7, 2025 · ebc2c17 · ebc2c17
2 parents 8f97164 + 897dc5a
commit ebc2c17
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/app/src/frontend/building/data-components/numeric-data-entry.css b/app/src/frontend/building/data-components/numeric-data-entry.css
@@ -0,0 +1,9 @@
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type=number]{
+    -moz-appearance: textfield;
+}
diff --git a/app/src/frontend/building/data-components/numeric-data-entry.tsx b/app/src/frontend/building/data-components/numeric-data-entry.tsx
@@ -3,6 +3,7 @@ import React, { Fragment } from 'react';
 import { BaseDataEntryProps } from './data-entry';
 import { DataTitleCopyable } from './data-title';
 
+import './numeric-data-entry.css';
 
 interface NumericDataEntryProps extends BaseDataEntryProps {
     value?: number;
@@ -28,6 +29,7 @@ const NumericDataEntry: React.FunctionComponent<NumericDataEntryProps> = (props)
             <input
                 className="form-control"
                 type="number"
+                onWheel={(e) => (e.target as HTMLElement).blur()}
                 id={slugWithModifier}
                 name={slugWithModifier}
                 value={props.value == undefined ? '' : props.value}