diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx index 21abd9cb8f7e..e1e7d81b2285 100644 --- 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 = ({ 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,7 +32,6 @@ const InlineInputSegment: React.FC = ({ css["inline-input"], numeric ? css["number-input"] : css["string-input"], shouldExpand ? css["long"] : undefined, - error ? css["error"] : undefined )} initialValue={initialValue} onChange={onChange} @@ -48,6 +39,7 @@ const InlineInputSegment: React.FC = ({ 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 index 965532585cd8..07c1aa6596f6 100644 --- 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 {