Support negative numbers in text inputs

tiagofernandez · Jun 10, 2021 · f7dc0d9 · f7dc0d9
1 parent 7cc8331
commit f7dc0d9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "mui-querybuilder",
     "description": "Material-UI Query Builder.",
-    "version": "1.1.0",
+    "version": "1.2.1",
     "license": "MIT",
     "author": "Tiago Fernandez",
     "homepage": "https://github.com/tiagofernandez/mui-querybuilder#readme",

diff --git a/src/Value.jsx b/src/Value.jsx
@@ -43,6 +43,9 @@ const Value = React.memo(
             const customOperator = customOperators[filter.type];
             filter.type = customOperator?.type;
         }
+        const handleTextFieldChange = (event) => {
+            dispatch({ type: "set-value", id, value: event.target.value });
+        };
         switch (filter.type) {
             case "date":
                 return (
@@ -60,16 +63,11 @@ const Value = React.memo(
                 return (
                     <TextField
                         data-testid={testId}
+                        type="number"
                         value={readNumericValue(value)}
-                        onChange={(event) => {
-                            const inputValue = event.target.value;
-                            const newValue = inputValue.length > 0 ? Number(inputValue) : null;
-                            if (newValue !== value) {
-                                dispatch({ type: "set-value", id, value: newValue });
-                            }
-                        }}
+                        onChange={handleTextFieldChange}
                         onKeyPress={(event) => {
-                            if (/\D/.test(event.key)) {
+                            if (/\.|,/.test(event.key)) {
                                 event.preventDefault();
                             }
                         }}
@@ -102,14 +100,9 @@ const Value = React.memo(
                 return (
                     <TextField
                         data-testid={testId}
+                        type="number"
                         value={readNumericValue(value)}
-                        onChange={(event) => {
-                            const { value: val } = event.target;
-                            const v = val.replace(/[^.\d]|^0+/g, "").replace(/^(\d*\.?)|(\d*)\.?/g, "$1$2") || null;
-                            if (v !== value) {
-                                dispatch({ type: "set-value", id, value: v });
-                            }
-                        }}
+                        onChange={handleTextFieldChange}
                     />
                 );
             case "radio":
@@ -181,15 +174,7 @@ const Value = React.memo(
                 );
             default:
                 return (
-                    <TextField
-                        fullWidth
-                        data-testid={testId}
-                        value={value || ""}
-                        onChange={(event) => {
-                            const { value } = event.target;
-                            dispatch({ type: "set-value", id, value });
-                        }}
-                    />
+                    <TextField fullWidth data-testid={testId} value={value || ""} onChange={handleTextFieldChange} />
                 );
         }
     },

diff --git a/stories/QueryBuilder.stories.jsx b/stories/QueryBuilder.stories.jsx
@@ -117,12 +117,12 @@ storiesOf("MuiQueryBuilder")
                 {
                     field: "word_count",
                     operator: "less",
-                    value: 420,
+                    value: "420",
                 },
                 {
                     field: "rating",
                     operator: "greater",
-                    value: 4.2,
+                    value: "4.2",
                 },
                 {
                     combinator: "or",