New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fixed bug in TextInputs when scrolling #1838
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 dependenciesincrementNumber
anddecrementNumber
in theuseCallback
.- 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).
…/halstack-react into Mil4n0r/fix-NaN-textinput
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can solve the useEffect
dependencies issue splitting the onWheel
functionality:
- 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}
- Remove the
useEffect
from theTextInput
and move it to theNumberInput
. 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 😄 |
Checklist
(Check off all the items before submitting)
/lib
directory./website
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.