Improve UX of numeric input #1029
Conversation
axelboc
force-pushed
the
ab-num-input
branch
2 times, most recently
from
bdd8bc0
to
0acb42b
Compare
| inputSize="5" | ||
| immediate | ||
| onSave={this.props.saveStep} | ||
| {this.props.saveStep && |
There was a problem hiding this comment.
Unrelated change: just a quick fix of the appearance of the cancel button on motor inputs. The button was previously displayed inside the step value div, which didn't look quite right. The button now replaces the entire step value div while busy:
| this.handleSubmit = this.handleSubmit.bind(this); | ||
| this.inputRef = React.createRef(); | ||
| } | ||
| function NumericInput(props) { |
There was a problem hiding this comment.
Converting to a function component, since it's so simple.
| @@ -116,3 +116,100 @@ input[type='color']:focus, | |||
| .nowrap-style { | |||
| white-space: nowrap; | |||
| } | |||
|
|
|||
| .rc-input-number { | |||
There was a problem hiding this comment.
I tried importing rc-input-number's default styles but it required a lot of overrides to make it look the way I wanted, so instead I decided to duplicate the styles and tweak them to my liking. It's not a lot of styles overall, so I think this is more maintainable that the former solution.
|
Excellent, thanks alot ! (from sunny (not really) Maubisson) ;) |
On top of #1028
I'm replacing the old, buggy
react-numeric-inputpackage with the more recentrc-input-number. This brings a bunch of UX improvements out of the box, notably the fact that the precision is no longer applied while typing but on blur (i.e. when the field loses focus). This means decimals can now be removed completely with backspace, which is a lot less confusing.I've refactored more things under the hood, but there are two additional UX changes worth mentioning: