FIX: Problem with cursor jumps and input behaviour for NumberInput #1945
Conversation
| const isIntegerTransition = | ||
| !data && | ||
| !Number.isInteger(previousValue) && | ||
| Number.isInteger(possibleNewValue); | ||
|
|
||
| if (isIntegerTransition && value < previousValue) { | ||
| await setSelectionAfterTick(target.value.length); | ||
| } else if (isIntegerTransition && previousValue && value > previousValue) { | ||
| let parts = previousValue.toString().split("."); | ||
|
|
||
| if (inputType === "deleteContentForward" && parts[1]) { | ||
| parts[1] = parts[1].substring(1); | ||
| } else if (inputType === "deleteContentBackward") { | ||
| parts[0] = parts[0].slice(0, -1); | ||
| } | ||
|
|
||
| const chars = | ||
| parts[0].length + (inputType === "deleteContentBackward" ? 1 : 0); | ||
| value = parse(parts.join(".")); | ||
| await setSelectionAfterTick(chars); | ||
| } else if ( | ||
| !isIntegerTransition && | ||
| previousValue && | ||
| value === previousValue && | ||
| inputType === "deleteContentForward" | ||
| ) { | ||
| value = parse(0); | ||
| await setSelectionAfterTick(0); | ||
| } else { | ||
| value = possibleNewValue; | ||
| } |
There was a problem hiding this comment.
This entire logic is hard to understand/follow, though I also don't know if/how it could be improved...
There was a problem hiding this comment.
The function starts by parsing the current value of the input field and storing it in previousValue. It then parses the new value of the input field and stores it in possibleNewValue and value.
Next, it checks if the input action resulted in a transition from a non-integer to an integer. This is determined by the isIntegerTransition variable, which is true if data is undefined, previousValue is not an integer, and possibleNewValue is an integer.
If isIntegerTransition is true and the new value is less than the previous value, it sets the cursor position to the end of the input field after the next tick.
If isIntegerTransition is true, the new value is greater than the previous value, and the previous value is not undefined, it splits the previous value into integer and fractional parts. Depending on the inputType, it removes a character from the fractional part or the integer part. It then joins the parts back together, parses the result, and sets it as the new value. It also sets the cursor position to a specific position after the next tick.
If isIntegerTransition is false, the new value is equal to the previous value, and the inputType is "deleteContentForward" (meaning the user pressed delete key instead of backspace), it sets the value to 0 and the cursor position to the start of the input field after the next tick.
If none of the above conditions are met, it simply sets the value to possibleNewValue.
Fixes the jumping of input cursor in NumberInput when using keyboard backspace and delete to remove decimal values.