Skip to content

Commit

Permalink
[@mantine/core] NumberInput: Fix cursor position changing when the va…
Browse files Browse the repository at this point in the history
…lue is incremented/decremented (#6004)

* [@mantine/core] fix: NumberInput cursor position

* fix: set cursor on end only when  decrement/increment

* define types
  • Loading branch information
Kenzo-Wada authored Apr 11, 2024
1 parent 297ddce commit cff6b32
Showing 1 changed file with 8 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,12 @@ export const NumberInput = factory<NumberInputFactory>((_props, ref) => {
return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
};

const adjustCursor = (position?: number) => {
if (inputRef.current && position) {
inputRef.current.setSelectionRange(position, position);
}
};

const incrementRef = useRef<() => void>();
incrementRef.current = () => {
let val: number;
Expand All @@ -272,6 +278,7 @@ export const NumberInput = factory<NumberInputFactory>((_props, ref) => {
{ floatValue: parseFloat(formattedValue), formattedValue, value: formattedValue },
{ source: 'increment' as any }
);
setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);
};

const decrementRef = useRef<() => void>();
Expand All @@ -295,6 +302,7 @@ export const NumberInput = factory<NumberInputFactory>((_props, ref) => {
{ floatValue: parseFloat(formattedValue), formattedValue, value: formattedValue },
{ source: 'decrement' as any }
);
setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);
};

const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
Expand Down

0 comments on commit cff6b32

Please sign in to comment.