From 52ed131eda943c3372445ebbf2f18552417e7b65 Mon Sep 17 00:00:00 2001
From: Sajarin M <sajarinm@yahoo.com>
Date: Mon, 14 Nov 2022 17:14:56 +0530
Subject: [PATCH] [@mantine/core] NumberInput : Fix readOnly prop is ignored
 (mantinedev#2955)

---
 src/mantine-core/src/NumberInput/NumberInput.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/mantine-core/src/NumberInput/NumberInput.tsx b/src/mantine-core/src/NumberInput/NumberInput.tsx
index 96e4aa3a73d..03898c3b497 100644
--- 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,6 +424,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>((props
       variant={variant}
       value={formatNum(tempValue)}
       disabled={disabled}
+      readOnly={readOnly}
       ref={useMergedRef(inputRef, ref)}
       onChange={handleChange}
       onBlur={handleBlur}
@@ -429,7 +432,8 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>((props
       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}