[@mantine/core] NumberInput: Fix readOnly prop not working correctly (#…

…2956)
mantinedev · Nov 17, 2022 · 9ec0524 · 9ec0524
1 parent 734a482
commit 9ec0524
Showing 1 changed file with 10 additions and 6 deletions.
diff --git a/src/mantine-core/src/NumberInput/NumberInput.tsx b/src/mantine-core/src/NumberInput/NumberInput.tsx
@@ -125,6 +125,7 @@ const defaultProps: Partial<NumberInputProps> = {
 
 export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>((props, ref) => {
   const {
+    readOnly,
     disabled,
     value,
     onChange,
@@ -400,11 +401,12 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>((props
       event.preventDefault();
       return;
     }
-
-    if (event.key === 'ArrowUp') {
-      onStep(event, true);
-    } else if (event.key === 'ArrowDown') {
-      onStep(event, false);
+    if (!readOnly) {
+      if (event.key === 'ArrowUp') {
+        onStep(event, true);
+      } else if (event.key === 'ArrowDown') {
+        onStep(event, false);
+      }
     }
   };
 
@@ -422,14 +424,16 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>((props
       variant={variant}
       value={formatNum(tempValue)}
       disabled={disabled}
+      readOnly={readOnly}
       ref={useMergedRef(inputRef, ref)}
       onChange={handleChange}
       onBlur={handleBlur}
       onFocus={handleFocus}
       onKeyDown={handleKeyDown}
       onKeyUp={handleKeyUp}
       rightSection={
-        rightSection || (disabled || hideControls || variant === 'unstyled' ? null : controls)
+        rightSection ||
+        (disabled || readOnly || hideControls || variant === 'unstyled' ? null : controls)
       }
       rightSectionWidth={rightSectionWidth || theme.fn.size({ size, sizes: CONTROL_SIZES }) + 1}
       radius={radius}