Merge branch 'master' of github.com:mantinedev/mantine

mantinedev · Nov 17, 2022 · ed0fa60 · ed0fa60
2 parents c6c0691 + 9ec0524
commit ed0fa60
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/docs/src/docs/core/ScrollArea.mdx b/docs/src/docs/core/ScrollArea.mdx
@@ -23,7 +23,7 @@ It is adapted to work well with light and dark color schemes and supports the fo
 - `type` defines scrollbars behavior:
   - `hover` – scrollbars are visible on hover
   - `scroll` – scrollbars are visible on scroll
-  - `auto` – similar to `overflow: auto` – scrollbars are always visible whether the content is overflowing
+  - `auto` – similar to `overflow: auto` – scrollbars are always visible when the content is overflowing
   - `always` – same as `auto` but scrollbars are always visible regardless of whether the content is overflowing
   - `never` – scrollbars are always hidden
 - `offsetScrollbars` – offset scrollbars with padding

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}