Fixed bug in TextInputs when scrolling

[Mil4n0r]

Checklist
(Check off all the items before submitting)

• Build process is done without errors. All tests pass in the /lib directory.
• Self-reviewed the code before submitting.
• Meets accessibility standards.
• Added/updated documentation to /website as needed.
• Added/updated tests as needed.

Description
Fixes bug related to #1800 where, on scroll, text inputs where displaying NaN.
The solution has been adding the pre-condition of the field being a number field before applying the handleWheel callback.

[GomezIvann]

A few comments:

• Since you are conditionally adding an event listener, you should also check the same condition when cleaning the effect. If not, you are always removing a non-existing event.
• handleWheel is missing the dependencies incrementNumber and decrementNumber in the useCallback.
• Please, format the code before committing it.
• Should we add a test to avoid this from happening in the future (checking that the wheel increases the input value).

[GomezIvann]

We can solve the useEffect dependencies issue splitting the onWheel functionality:

1. Use the onWheel event of the Input component to do the increment/decrement functionality (remember to remove the event.preventDefault, is a passive event):

    const handleNumberInputWheel = (event: React.WheelEvent<HTMLInputElement>) => {
      if (document.activeElement === inputRef.current)
        event.deltaY < 0 ? incrementNumber(inputRef.current.value) : decrementNumber(inputRef.current.value);
    };  

onWheel={numberInputContext?.typeNumber === "number" ? handleNumberInputWheel : undefined}

2. Remove the useEffect from the TextInput and move it to the NumberInput. This makes sense since this functionality should only be available in that component:

    const numberInputRef = React.useRef<HTMLInputElement>(null);

    useEffect(() => {
      const input = numberInputRef.current?.getElementsByTagName("input")[0] as HTMLInputElement;
      const preventDefault = (event: WheelEvent) => {
        event.preventDefault();
      };

      input?.addEventListener("wheel", preventDefault, { passive: false });
      return () => {
        input?.removeEventListener("wheel", preventDefault);
      };
    }, []);

    return (
      <NumberInputContext.Provider value={{ typeNumber: "number", minNumber: min, maxNumber: max, stepNumber: step }}>
        <NumberInputContainer ref={numberInputRef}>

What do you think?

[Mil4n0r]

We can solve the useEffect dependencies issue splitting the onWheel functionality:

1. Use the onWheel event of the Input component to do the increment/decrement functionality (remember to remove the event.preventDefault, is a passive event):

    const handleNumberInputWheel = (event: React.WheelEvent<HTMLInputElement>) => {
      if (document.activeElement === inputRef.current)
        event.deltaY < 0 ? incrementNumber(inputRef.current.value) : decrementNumber(inputRef.current.value);
    };  

onWheel={numberInputContext?.typeNumber === "number" ? handleNumberInputWheel : undefined}

2. Remove the useEffect from the TextInput and move it to the NumberInput. This makes sense since this functionality should only be available in that component:

    const numberInputRef = React.useRef<HTMLInputElement>(null);

    useEffect(() => {
      const input = numberInputRef.current?.getElementsByTagName("input")[0] as HTMLInputElement;
      const preventDefault = (event: WheelEvent) => {
        event.preventDefault();
      };

      input?.addEventListener("wheel", preventDefault, { passive: false });
      return () => {
        input?.removeEventListener("wheel", preventDefault);
      };
    }, []);

    return (
      <NumberInputContext.Provider value={{ typeNumber: "number", minNumber: min, maxNumber: max, stepNumber: step }}>
        <NumberInputContainer ref={numberInputRef}>

What do you think?

This looks like a much more logical approach, encapsulating the NumberInput functionality encapsulated within the appropiate component and reducing all the unnecessary dependencies inside the TextInput component.

Thanks for your time 😄