Teacher tool: Restrict numerical inputs to no more than two digits (#…

…10168) * limit input to two digits * move reg exp to state variable * use 'filter' instead of 'pattern'
microsoft · Sep 11, 2024 · 26db124 · 26db124
1 parent e0901ae
commit 26db124
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/react-common/components/controls/Input.tsx b/react-common/components/controls/Input.tsx
@@ -22,6 +22,7 @@ export interface InputProps extends ControlProps {
     handleInputRef?: React.RefObject<HTMLInputElement> | ((ref: HTMLInputElement) => void);
     preserveValueOnBlur?: boolean;
     options?: pxt.Map<string>;
+    filter?: string;
 
     onChange?: (newValue: string) => void;
     onEnterKey?: (value: string) => void;
@@ -62,8 +63,9 @@ export const Input = (props: InputProps) => {
         options
     } = props;
 
-    const [value, setValue] = React.useState(undefined);
+    const [value, setValue] = React.useState(initialValue || "");
     const [expanded, setExpanded] = React.useState(false);
+    const [filter] = React.useState(props.filter ? new RegExp(props.filter) : undefined);
 
     let container: HTMLDivElement;
 
@@ -83,7 +85,10 @@ export const Input = (props: InputProps) => {
     }
 
     const changeHandler = (e: React.ChangeEvent<any>) => {
-        const newValue = (e.target as any).value;
+        let newValue = (e.target as any).value;
+        if (newValue && filter) {
+            newValue = newValue.match(filter)?.join("") || "";
+        }
         if (!readOnly && (value !== newValue)) {
             setValue(newValue);
         }
@@ -147,7 +152,7 @@ export const Input = (props: InputProps) => {
 
         const value = options[option];
         setValue(value);
-        if (onOptionSelected) { 
+        if (onOptionSelected) {
             onOptionSelected(value);
         }
 
@@ -174,7 +179,7 @@ export const Input = (props: InputProps) => {
                     aria-hidden={ariaHidden}
                     type={type || "text"}
                     placeholder={placeholder}
-                    value={value !== undefined ? value : (initialValue || "")}
+                    value={value}
                     readOnly={!!readOnly}
                     onClick={clickHandler}
                     onChange={changeHandler}

diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -34,7 +34,7 @@ const InlineInputSegment: React.FC<InlineInputSegmentProps> = ({
         setParameterValue(instance.instanceId, param.name, newValue);
     }
 
-    const tooltip = isEmpty ? `"${param.name}: ${Strings.ValueRequired}` : param.name;
+    const tooltip = isEmpty ? `${param.name}: ${Strings.ValueRequired}` : param.name;
     return (
         <div title={tooltip} className={css["inline-input-wrapper"]}>
             <Input
@@ -51,7 +51,7 @@ const InlineInputSegment: React.FC<InlineInputSegmentProps> = ({
                 placeholder={numeric ? "0" : param.name}
                 title={tooltip}
                 autoComplete={false}
-                type={numeric ? "number" : "text"}
+                filter={numeric ? "[0-9]{1,2}" : undefined}
             />
         </div>
     );