Number input type for numbers

microsoft · Mar 7, 2024 · 8209783 · 8209783
1 parent 3a91f86
commit 8209783
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -4,10 +4,9 @@ import { DebouncedInput } from "./DebouncedInput";
 import { logDebug } from "../services/loggingService";
 import { setParameterValue } from "../transforms/setParameterValue";
 import { classList } from "react-common/components/util";
-import { useState } from "react";
+import { splitCriteriaTemplate } from "../utils";
 // eslint-disable-next-line import/no-internal-modules
 import css from "./styling/CriteriaInstanceDisplay.module.scss";
-import { splitCriteriaTemplate } from "../utils";
 
 interface InlineInputSegmentProps {
     initialValue: string;
@@ -23,15 +22,8 @@ const InlineInputSegment: React.FC<InlineInputSegmentProps> = ({
     shouldExpand,
     numeric,
 }) => {
-    const [error, setError] = useState("");
-
     function onChange(newValue: string) {
-        if (!numeric || !isNaN(Number(newValue))) {
-            setError("");
-            setParameterValue(instance.instanceId, param.name, newValue);
-        } else {
-            setError(lf("value must be numeric"));
-        }
+        setParameterValue(instance.instanceId, param.name, newValue);
     }
 
     return (
@@ -40,14 +32,14 @@ const InlineInputSegment: React.FC<InlineInputSegmentProps> = ({
                 css["inline-input"],
                 numeric ? css["number-input"] : css["string-input"],
                 shouldExpand ? css["long"] : undefined,
-                error ? css["error"] : undefined
             )}
             initialValue={initialValue}
             onChange={onChange}
             preserveValueOnBlur={true}
             placeholder={numeric ? "0" : param.name}
             title={param.name}
             autoComplete={false}
+            type = {numeric ? "number" : "text"}
         />
     );
 };

diff --git a/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss b/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
@@ -58,11 +58,17 @@
 
                 &.number-input {
                     width: 2.3rem;
-                }
-
-                &.error div[class*="common-input-group"] {
-                    border-color: var(--pxt-error);
-                    background-color: var(--pxt-error-background);
+
+                    // Hide arrows on right-hand side of number input.
+                    // Firefox
+                    input[type=number] {
+                        -moz-appearance: textfield;
+                    }
+                    // Other browsers
+                    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
+                        -webkit-appearance: none;
+                        margin: 0;
+                    }
                 }
 
                 input {