support read only

jpmorganchase · May 22, 2024 · 0a7d48e · 0a7d48e
1 parent c43b828
commit 0a7d48e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/lab/src/stepper-input/StepperInput.tsx b/packages/lab/src/stepper-input/StepperInput.tsx
@@ -11,7 +11,7 @@ import stepperInputCss from "./StepperInput.css";
 const withBaseName = makePrefixer("saltStepperInput");
 
 export interface StepperInputProps
-  extends Omit<InputProps, "onChange" | "readOnly" | "emptyReadOnlyMarker"> {
+  extends Omit<InputProps, "onChange" | "emptyReadOnlyMarker"> {
   /**
    * A multiplier applied to the `step` when the value is incremented or decremented using the PageDown/PageUp keys.
    */
@@ -65,12 +65,12 @@ export interface StepperInputProps
 export const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(
   function StepperInput(props, ref) {
     const {
-      textAlign = "left",
       className,
       hideButtons,
       onBlur,
       onChange,
       onFocus,
+      readOnly,
       ...rest
     } = props;
 
@@ -91,10 +91,10 @@ export const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(
           onBlur={onBlur}
           onFocus={onFocus}
           ref={inputRef}
-          textAlign={textAlign}
+          readOnly={readOnly}
           {...getInputProps(rest)}
         />
-        {!hideButtons && (
+        {!hideButtons && !readOnly && (
           <div className={withBaseName("buttonContainer")}>
             <Button
               aria-label="increment value"

diff --git a/packages/lab/src/stepper-input/useStepperInput.ts b/packages/lab/src/stepper-input/useStepperInput.ts
@@ -118,6 +118,7 @@ export const useStepperInput = (
   };
 
   const setNextValue = (modifiedValue: number) => {
+    if (props.readOnly) return;
     let nextValue = modifiedValue;
     if (nextValue < min) nextValue = min;
     if (nextValue > max) nextValue = max;
@@ -233,6 +234,7 @@ export const useStepperInput = (
       onChange: callAll(inputProps.onChange, handleInputChange),
       onFocus: inputProps.onFocus,
       onKeyDown: callAll(inputProps.onKeyDown, handleInputKeyDown),
+      textAlign: inputProps.textAlign,
       value: String(currentValue),
     };
   };

diff --git a/packages/lab/stories/stepper-input/stepper-input.stories.tsx b/packages/lab/stories/stepper-input/stepper-input.stories.tsx
@@ -167,3 +167,12 @@ export const HideButtons: StoryFn = (args) => {
     </FormField>
   );
 };
+
+export const ReadOnly: StoryFn = (args) => {
+  return (
+    <FormField>
+      <FormFieldLabel>Stepper Input</FormFieldLabel>
+      <StepperInput {...args} readOnly />
+    </FormField>
+  );
+};