limit input to two digits

microsoft · Sep 9, 2024 · dbd3d33 · dbd3d33
1 parent 0473115
commit dbd3d33
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 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;
@@ -59,10 +60,11 @@ export const Input = (props: InputProps) => {
         onOptionSelected,
         handleInputRef,
         preserveValueOnBlur,
-        options
+        options,
+        filter
     } = props;
 
-    const [value, setValue] = React.useState(undefined);
+    const [value, setValue] = React.useState(initialValue || "");
     const [expanded, setExpanded] = React.useState(false);
 
     let container: HTMLDivElement;
@@ -83,7 +85,11 @@ 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) {
+            const pat = new RegExp(filter);
+            newValue = newValue.match(pat)?.join("") || "";
+        }
         if (!readOnly && (value !== newValue)) {
             setValue(newValue);
         }
@@ -147,7 +153,7 @@ export const Input = (props: InputProps) => {
 
         const value = options[option];
         setValue(value);
-        if (onOptionSelected) { 
+        if (onOptionSelected) {
             onOptionSelected(value);
         }
 
@@ -174,7 +180,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>
     );