fix(text-field): add onWheel listener to prevent value from changing …

…on wheel
p3ol · Mar 15, 2023 · ca1410f · ca1410f
1 parent 7a937ae
commit ca1410f
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 2 deletions.
diff --git a/packages/react/lib/TextField/index.js b/packages/react/lib/TextField/index.js
@@ -127,7 +127,6 @@ const TextField = forwardRef(({
       )}
     >
       <Tag
-        { ...rest }
         autoFocus={autoFocus}
         className="field"
         ref={inputRef}
@@ -138,6 +137,8 @@ const TextField = forwardRef(({
         onChange={onChange_}
         onFocus={onFocus_}
         onBlur={onBlur_}
+        onWheel={() => inputRef.current?.blur()}
+        { ...rest }
       />
       { children }
     </div>

diff --git a/packages/react/lib/TextField/index.stories.js b/packages/react/lib/TextField/index.stories.js
@@ -50,3 +50,22 @@ export const withValidation = () => (
     onValidate={val => /^[0-9]+$/g.test(val)}
   />
 );
+
+export const typeNumber = () => (
+  <TextField
+    className="field noscroll"
+    label="Age"
+    placeholder="Age"
+    type="number"
+  />
+);
+
+export const withOnWheelOverrided = () => (
+  <TextField
+    className="field noscroll"
+    label="Age"
+    placeholder="Age"
+    type="number"
+    onWheel={action('wheel')}
+  />
+);
diff --git a/packages/react/lib/TextField/index.test.js b/packages/react/lib/TextField/index.test.js
@@ -1,5 +1,5 @@
 import { createRef } from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { blur, reset } from '~test-utils';
@@ -94,4 +94,36 @@ describe('<TextField />', () => {
     expect(container).toMatchSnapshot();
     unmount();
   });
+
+  it('should blur on scroll', async () => {
+    const user = userEvent.setup();
+    const { unmount, container } = render(<TextField type="number" />);
+
+    const input = container.querySelector('input');
+    await user.click(input);
+    expect(container).toMatchSnapshot('focused');
+    fireEvent.wheel(container.querySelector('.junipero.text-field input'), {
+      deltaY: 30,
+    });
+    expect(container).toMatchSnapshot('unfocused');
+    unmount();
+  });
+
+  it('should do the given action on scroll if onWheel is set', async () => {
+    const user = userEvent.setup();
+    const customWheel = jest.fn();
+    const { unmount, container } = render(
+      <TextField type="number" onWheel={customWheel} />
+    );
+
+    const input = container.querySelector('input');
+    await user.click(input);
+    expect(container).toMatchSnapshot('focused');
+    fireEvent.wheel(container.querySelector('.junipero.text-field input'), {
+      deltaY: 30,
+    });
+    expect(customWheel).toHaveBeenCalled();
+    expect(container).toMatchSnapshot('always focused');
+    unmount();
+  });
 });
diff --git a/packages/react/lib/TextField/index.test.js.snap b/packages/react/lib/TextField/index.test.js.snap
@@ -70,6 +70,62 @@ exports[`<TextField /> should be invalid if validation fails 1`] = `
 </div>
 `;
 
+exports[`<TextField /> should blur on scroll: focused 1`] = `
+<div>
+  <div
+    class="junipero text-field pristine valid empty focused"
+  >
+    <input
+      class="field"
+      type="number"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`<TextField /> should blur on scroll: unfocused 1`] = `
+<div>
+  <div
+    class="junipero text-field pristine valid empty"
+  >
+    <input
+      class="field"
+      type="number"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`<TextField /> should do the given action on scroll if onWheel is set: always focused 1`] = `
+<div>
+  <div
+    class="junipero text-field pristine valid empty focused"
+  >
+    <input
+      class="field"
+      type="number"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`<TextField /> should do the given action on scroll if onWheel is set: focused 1`] = `
+<div>
+  <div
+    class="junipero text-field pristine valid empty focused"
+  >
+    <input
+      class="field"
+      type="number"
+      value=""
+    />
+  </div>
+</div>
+`;
+
 exports[`<TextField /> should not allow to change value when disabled 1`] = `
 <div>
   <div