feat(TextField): add wheel event handler for input[type="number"] (#3820

) Добавил патч на слушатель события `wheel`. Добавил тесты. closes #3767 --------- Co-authored-by: gizeasy <[email protected]>
consta-design-system · Nov 19, 2024 · 7fb111e · 7fb111e
1 parent b468905
commit 7fb111e
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 1 deletion.
diff --git a/src/components/FieldComponents/FieldArrayValueInlineControl/FieldArrayValueInlineControl.tsx b/src/components/FieldComponents/FieldArrayValueInlineControl/FieldArrayValueInlineControl.tsx
@@ -68,6 +68,7 @@ const FieldArrayValueInlineControlRender = (
     onCutCapture,
     onPaste,
     onPasteCapture,
+    onWheel,
     ...otherProps
   } = props;
 
@@ -127,6 +128,7 @@ const FieldArrayValueInlineControlRender = (
         onCutCapture={onCutCapture}
         onPaste={onPaste}
         onPasteCapture={onPasteCapture}
+        onWheel={onWheel}
       />
       <div
         ref={fakeInputRef}

diff --git a/src/components/FieldComponents/FieldArrayValueInlineControl/types.ts b/src/components/FieldComponents/FieldArrayValueInlineControl/types.ts
@@ -27,6 +27,7 @@ export type FieldArrayValueInlineControlProps<ITEM> =
       disabled?: boolean;
       placeholder?: string;
       size?: FieldPropSize;
+      onWheel?: React.WheelEventHandler<HTMLInputElement>;
     },
     HTMLDivElement
   >;

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -96,6 +96,7 @@ export const TextFieldRender = <TYPE extends string>(
     onKeyUp,
     onKeyUpCapture,
     onClear,
+    onWheel: onWheelProp,
     ...otherProps
   } = usePropsHandler(COMPONENT_NAME, props, textFieldRef);
 
@@ -239,6 +240,14 @@ export const TextFieldRender = <TYPE extends string>(
     onEvent: onKeyDownProp,
   });
 
+  const onWheel = (e: React.WheelEvent<HTMLInputElement>) => {
+    if (onWheelProp) {
+      onWheelProp(e);
+    } else if (type === 'number') {
+      inputRef.current?.blur();
+    }
+  };
+
   const textareaProps = {
     rows,
     cols,
@@ -255,6 +264,7 @@ export const TextFieldRender = <TYPE extends string>(
     min,
     step: !Array.isArray(sortedSteps) ? sortedSteps : 0,
     onKeyDown,
+    onWheel,
     ref: useForkRef([
       inputRef,
       inputRefProp,

diff --git a/src/components/TextField/__tests__/TextField.test.tsx b/src/components/TextField/__tests__/TextField.test.tsx
@@ -176,4 +176,26 @@ describe('Компонент Button', () => {
       });
     });
   });
+  describe('проверка onWheel', () => {
+    it('вызывается onWheel', () => {
+      const handleWheel = jest.fn();
+      renderComponent({
+        onWheel: handleWheel,
+      });
+
+      const input = getInput() as Element;
+      fireEvent.wheel(input, { deltaMode: 0, deltaY: 10 });
+
+      expect(handleWheel).toHaveBeenCalledTimes(1);
+    });
+    it('блюрится числовой инпут при отсутствии onWheel', () => {
+      const handleChange = jest.fn();
+
+      renderComponent({ type: 'number', step: 1, onChange: handleChange });
+      const input = getInput() as Element;
+      fireEvent.wheel(input, { deltaMode: 0, deltaY: 10 });
+
+      expect(input).not.toHaveFocus();
+    });
+  });
 });
diff --git a/src/components/TextFieldCanary/TextFieldTypeNumber/TextFieldTypeNumber.tsx b/src/components/TextFieldCanary/TextFieldTypeNumber/TextFieldTypeNumber.tsx
@@ -63,6 +63,7 @@ export const TextFieldTypeNumber: TextFieldTypeComponent<'number'> = forwardRef(
       onPaste,
       onPasteCapture,
       onClear,
+      onWheel,
       ...otherProps
     } = props;
 
@@ -95,6 +96,7 @@ export const TextFieldTypeNumber: TextFieldTypeComponent<'number'> = forwardRef(
       max,
       onKeyDown,
       stepIsActive(sortSteps, disabled),
+      onWheel,
     ] as const);
 
     const changeNumberValue = useCallback(
@@ -152,6 +154,14 @@ export const TextFieldTypeNumber: TextFieldTypeComponent<'number'> = forwardRef(
       ),
     );
 
+    const handleWheel = useCallback((e: React.WheelEvent<HTMLInputElement>) => {
+      if (refs.current[5]) {
+        refs.current[5](e);
+      } else {
+        inputRef.current?.blur();
+      }
+    }, []);
+
     return (
       <FieldControlLayout
         {...otherProps}
@@ -197,6 +207,7 @@ export const TextFieldTypeNumber: TextFieldTypeComponent<'number'> = forwardRef(
           onKeyDownCapture={onKeyDownCapture}
           onKeyUp={onKeyUp}
           onKeyUpCapture={onKeyUpCapture}
+          onWheel={handleWheel}
           maxLength={maxLength}
           disabled={disabled}
           type={type}

diff --git a/src/components/TextFieldCanary/TextFieldTypePassword/TextFieldTypePassword.tsx b/src/components/TextFieldCanary/TextFieldTypePassword/TextFieldTypePassword.tsx
@@ -55,6 +55,7 @@ export const TextFieldTypePassword: TextFieldTypeComponent<'password'> =
       onPaste,
       onPasteCapture,
       onClear,
+      onWheel,
       ...otherProps
     } = props;
 
@@ -133,6 +134,7 @@ export const TextFieldTypePassword: TextFieldTypeComponent<'password'> =
           onCutCapture={onCutCapture}
           onPaste={onPaste}
           onPasteCapture={onPasteCapture}
+          onWheel={onWheel}
         />
       </FieldControlLayout>
     );

diff --git a/src/components/TextFieldCanary/TextFieldTypeText/TextFieldTypeText.tsx b/src/components/TextFieldCanary/TextFieldTypeText/TextFieldTypeText.tsx
@@ -53,6 +53,7 @@ export const TextFieldTypeText: TextFieldTypeComponent<string> = forwardRef(
       onPaste,
       onPasteCapture,
       onClear,
+      onWheel,
       ...otherProps
     } = props;
 
@@ -123,6 +124,7 @@ export const TextFieldTypeText: TextFieldTypeComponent<string> = forwardRef(
           onCutCapture={onCutCapture}
           onPaste={onPaste}
           onPasteCapture={onPasteCapture}
+          onWheel={onWheel}
         />
       </FieldControlLayout>
     );

diff --git a/src/components/TextFieldCanary/TextFieldTypeTextArea/TextFieldTypeTextArea.tsx b/src/components/TextFieldCanary/TextFieldTypeTextArea/TextFieldTypeTextArea.tsx
@@ -67,6 +67,7 @@ export const TextFieldTypeTextArea: TextFieldTypeComponent<'textarea'> =
       onPaste,
       onPasteCapture,
       onClear,
+      onWheel,
       ...otherProps
     } = props;
 
@@ -127,6 +128,7 @@ export const TextFieldTypeTextArea: TextFieldTypeComponent<'textarea'> =
       onCutCapture,
       onPaste,
       onPasteCapture,
+      onWheel,
     };
 
     const textAreaNoAutoSizeProps = {

diff --git a/src/components/TextFieldCanary/TextFieldTypeTextArray/TextFieldTypeTextArray.tsx b/src/components/TextFieldCanary/TextFieldTypeTextArray/TextFieldTypeTextArray.tsx
@@ -88,7 +88,7 @@ export const TextFieldTypeTextArray: TextFieldTypeComponent<'textarray'> =
       onPaste,
       onPasteCapture,
       onClear,
-
+      onWheel,
       ...otherProps
     } = props;
 
@@ -277,6 +277,7 @@ export const TextFieldTypeTextArray: TextFieldTypeComponent<'textarray'> =
             onKeyDownCapture={onKeyDownCapture}
             onKeyUp={onKeyUp}
             onKeyUpCapture={onKeyUpCapture}
+            onWheel={onWheel}
           />
         </div>
       </FieldControlLayout>

diff --git a/src/components/TextFieldCanary/types.ts b/src/components/TextFieldCanary/types.ts
@@ -114,6 +114,7 @@ export type TextFieldProps<TYPE extends string> = PropsWithHTMLAttributesAndRef<
     onCutCapture?: React.ClipboardEventHandler<InputType<TYPE>>;
     onPaste?: React.ClipboardEventHandler<InputType<TYPE>>;
     onPasteCapture?: React.ClipboardEventHandler<InputType<TYPE>>;
+    onWheel?: React.WheelEventHandler<InputType<TYPE>>;
   },
   HTMLDivElement
 > &

diff --git a/yarn.lock b/yarn.lock
@@ -1847,6 +1847,11 @@
     webpack-manifest-plugin "^5.0.0"
     workbox-webpack-plugin "^6.4.1"
 
+"@consta/uikit@^5.0.1":
+  version "5.14.0"
+  resolved "https://registry.yarnpkg.com/@consta/uikit/-/uikit-5.14.0.tgz#1457c54a28623db720e9e6efb2fb5451aa533f73"
+  integrity sha512-IeBhi7HgyRw2aZWVb9va5rAxt/EIqZ2vJx+30OKMWNwBOfViV2QXLpTQ74z+sJXg+L5KinO0rtAbyIfjkrjPMQ==
+
 "@consta/uikit@^5.4.1":
   version "5.9.2"
   resolved "https://registry.yarnpkg.com/@consta/uikit/-/uikit-5.9.2.tgz#5e3ee82b51445e8648305b82f096b23daf2f22c4"