Number input decimal cursor jump

[phll2]

Issue Description

When using a number input field, if a user enters a decimal number and then deletes the decimal part, the cursor unexpectedly jumps to the beginning of the input.

Steps to Reproduce

1. Enter a decimal number (e.g., "1.25") into the number input field.
2. Delete the decimal part (e.g., delete ".25").
3. Observe that the cursor jumps to the beginning of the input instead of staying at the end.

Expected Behavior

The cursor should remain at its current position after deleting the decimal part.

Actual Behavior

The cursor jumps to the beginning of the input after deleting the decimal part.

Possible Cause

This issue may be caused by the number type being converted (from float to integer) when the decimal is removed, triggering a re-render of the input field. This re-render might be resetting the cursor position.

Can be observed: https://modularforms.dev/solid/playground/special

[fabian-hiller]

Have you saw this guide? Maybe this is the fix: https://modularforms.dev/solid/guides/controlled-fields#number-input-example

[phll2]

I have yeah, it doesn't seem to be the solution unfortunately

[fabian-hiller]

Do you have an idea how to fix this?

[phll2]

const getValue = createMemo<number | undefined>((prevValue) => {
   return Number.isInteger(props.value) ? `${props.value}.0` : prevValue;
 });

This is my best effort so far, it's not a solution (and causes it's own issues), but it points to the re-render being caused when the browser changes the value from a float to an integer

[phll2]

it's interesting in that after it's been through it's initial cycle (adding the 0), it then seems to work with out jumping or adding the zero, I just can't work out why

[fabian-hiller]

Thanks for your research. Since Modular Forms only provides the data layer, you should be able to customize the integration with the HTML input element to avoid this problem.