[@mantine/core] NumberInput: Modify existing disabled style

mantinedev · Apr 28, 2023 · e508376 · e508376
1 parent d651c8d
commit e508376
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/mantine-core/src/NumberInput/NumberInput.styles.ts b/src/mantine-core/src/NumberInput/NumberInput.styles.ts
@@ -52,6 +52,7 @@ export default createStyles((theme, { radius }: NumberInputStylesParams, { size
 
     '&:disabled': {
       color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],
+      pointerEvents: 'none',
     },
   },
 

diff --git a/src/mantine-core/src/NumberInput/NumberInput.test.tsx b/src/mantine-core/src/NumberInput/NumberInput.test.tsx
@@ -339,20 +339,12 @@ describe('@mantine/core/NumberInput', () => {
     expectValue('6');
   });
 
-  it('sets state to min if input is empty and is incremented/decremented', async () => {
+  it('sets state to min if input is empty and is incremented', async () => {
     const spy = jest.fn();
     const { container } = render(<NumberInput max={1000} min={0} step={6} onChange={spy} />);
     await clickIncrement(container);
     expectValue('0');
     expect(spy).toHaveBeenLastCalledWith(0);
-
-    await enterText('{backspace}4');
-    expect(spy).toHaveBeenLastCalledWith(4);
-
-    await enterText('{backspace}');
-    await clickDecrement(container);
-    expectValue('0');
-    expect(spy).toHaveBeenLastCalledWith(0);
   });
 
   it('steps value with controls immediately call onChange', async () => {
@@ -429,4 +421,15 @@ describe('@mantine/core/NumberInput', () => {
 
     expect(blurSpy).toHaveBeenLastCalledWith(12);
   });
+
+  it('disables controls in disabled fieldset', () => {
+    const { container } = render(
+      <fieldset disabled>
+        <NumberInput {...defaultProps} />
+      </fieldset>
+    );
+
+    expect(container.querySelector('.mantine-NumberInput-controlDown')).toBeDisabled();
+    expect(container.querySelector('.mantine-NumberInput-controlUp')).toBeDisabled();
+  });
 });