From 0a7d48e2131bfd764c14747bd4e5f93cedba38d5 Mon Sep 17 00:00:00 2001
From: lilyvc <45168453+lilyvc@users.noreply.github.com>
Date: Wed, 22 May 2024 13:45:29 +0100
Subject: [PATCH] support read only

---
 packages/lab/src/stepper-input/StepperInput.tsx          | 8 ++++----
 packages/lab/src/stepper-input/useStepperInput.ts        | 2 ++
 .../lab/stories/stepper-input/stepper-input.stories.tsx  | 9 +++++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/lab/src/stepper-input/StepperInput.tsx b/packages/lab/src/stepper-input/StepperInput.tsx
index 3b6bd5221a3..0c2c745cc29 100644
--- 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
index a2241579417..0d587be4a40 100644
--- 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
index 52d17f3bcf7..239dbd9c7e5 100644
--- 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>
+  );
+};