Skip to content
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

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

Open
Nedgeva opened this issue Jan 30, 2019 · 6 comments
Labels

Comments

@Nedgeva
Copy link

Nedgeva commented Jan 30, 2019

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.
2019-01-30_13h47_26

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

Is it bug or expected behaviour?

@sutarmin
Copy link
Contributor

sutarmin commented Feb 7, 2019

It's default React behavior, details here: facebook/react#955 (comment) . I don't think we should track cursor position manually until we have it as a requirement :)

@raveclassic
Copy link
Contributor

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
Copy link
Contributor

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 raveclassic changed the title NumericStepper custom formatter/parser issue Feature: NumericStepper should support complex editing behavior for floats basing on the caret position Mar 15, 2019
@raveclassic
Copy link
Contributor

raveclassic commented Mar 15, 2019

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
Copy link
Contributor

/cc @mankdev @sutarmin

@raveclassic
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants