Fixed bug in TextInputs when scrolling

[Mil4n0r]

Checklist (Check off all the items before submitting)

• [x] Build process is done without errors. All tests pass in the /lib directory.
• [x] Self-reviewed the code before submitting.
• [x] Meets accessibility standards.
• [x] Added/updated documentation to /website as needed.
• [x] 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.

[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 😄