Feature: NumericStepper should support complex editing behavior for floats basing on the caret position

[Nedgeva]

Not sure if it's outside of component's scope. However let's clear some things with NS. Consider following code to reproduce behaviour (a little bit modified NumericStepper.page.tsx example):

const dollarFormatter = (value: string | number) => `$${Number(value).toFixed(5)}`;
const dollarParser = (input: string) => {
    const newValue = Number(input.slice(1));
    return isNaN(newValue) ? 0 : newValue;
};

when entering value into NS input it's always set carete to an end.

Seems like it's going to happen only if value has fixed amount of digits.

Is it bug or expected behaviour?

[sutarmin]

It's default React behavior, details here: https://github.com/facebook/react/issues/955#issuecomment-160703606 . I don't think we should track cursor position manually until we have it as a requirement :)

[raveclassic]

Looks like the issue is relevant because such behavior does describe what a numeric stepper should actually do, not a numeric input. Moreover I would expect top/bottom arrows to also work incrementing/decrementing the digit at the current caret position. Reopening.

[raveclassic]

NS should support 2 editing modes: one is full-editing which is enabled for integers and for floats to left from the point .. And other is overwrite with tracking of caret position which is enabled for floats to the right from the point .. Delete/Backspace should behave differently - erase digits (usual behavior) on the left and reset to 0 on the right (amount of zero symbols should be controlled by precision property).

[raveclassic]

NS should drop the formatter property because it is out of scope of editing numbers and may lead to value inconsistencies, for example it may insert additional .. Instead we should use some predefined config like the one from accounting.js (except arbitrary templates).

[raveclassic]

/cc @mankdev @sutarmin

[raveclassic]

I'd also suggest to replace underlying input[type=text] component with a custom control with full support for numeric keys as well as control keys. Caret should be simulated like it's done in DateInput/TimeInput.