React/DP-12921: Prevents min/max from being past on InputNumber and InputCurrency. #503

smurrayatwork · 2019-03-11T13:38:17Z

Description

This changes InputNumber and InputCurrency so that changes made can't go beyond the passed in min/max values.
This also adds the npm package "is" to the repo. We should use this going forward for type checking.
Focusing InputCurrency will now remove the placeholder text if the input has no value, and place it back on blur if there is still no value.
Finally, InputCurrency has been changed so that focusing no longer switches the currency formatting to numbers.

Related Issue / Ticket

Steps to Test

Pull the branch, npm install, run storybook, and browse to atoms -> forms -> Input(Number or Currency). Ensure that either input can no longer go beyond their set min or max values.

…yflower into react/DP-12734--currency-with-focus

…mbers on focus.

clairesunstudio · 2019-03-12T17:38:40Z

Since min/max only limits the inputs based on submission, and we are submitting values using onBlur. I think we should do a check in onBlur so that it's preventing out-of-bound values, both in inputCurrency and inputNumber.

I would suggest in handleChange/handleBlur we do a check and if input exceeds max, value will be set to max and if it exceeds min, it will be set to min. Let me know if that doesn't make sense.

clairesunstudio · 2019-03-12T17:55:05Z

If the value onChange is updated to a value exceeding the limits. the up/down keys and buttons stop work, because the check of newValue against min/max

This could be fixed if we do what i mentioned above to prevent value to be out of bound

clairesunstudio · 2019-03-12T19:04:55Z

For InputCurrency formatting, is there a way to keep track on the actual number value with user interaction and have the display be a layer on top of that.

e.g. when user backspace it will remove digits and will prevent the displayed $ and , to be removed.

User should not be able to modify the displayed $ , .

See these examples:
https://codepen.io/tutsplus/pen/PzpoWK
http://uipatterns.io/currency-input

clairesunstudio · 2019-03-15T13:48:33Z

Changes work well except for InputNumber min is not setting to min onBlur:

clairesunstudio · 2019-03-15T13:50:05Z

react/src/components/atoms/forms/InputNumber/InputNumber.stories.js

@@ -14,8 +14,16 @@ storiesOf('atoms/forms', module)
    'InputNumber', (() => {
      const inputTextOptionsWithKnobs = Object.assign(...Object.entries(InputNumberOptions).map(([k, v]) => (
        { [k]: v() })));
+      const storyProps = {
+        style: (inputTextOptionsWithKnobs.inline) ? { width: '400px' } : { width: '200px' }


Is this only for testing purposes? do you want to you remove it to fix the visual regression?

This is only for the story, but I should update the backstop image.

clairesunstudio · 2019-03-15T14:02:06Z

The other thing is in Form:
For some reason when input0 is set to 100 (max is 100) input1 becomes 90 instead of 0

Also onBlur only updates its own value doesn't rerender the other linked input, not sure if this is going to be an issue in the calculaters. i will npm link and test it out

…yflower into react/DP-12921--input-min-max

react/src/components/atoms/forms/InputNumber/index.js

clairesunstudio · 2019-03-18T15:58:04Z

react/src/components/atoms/forms/InputNumber/index.js

-          const displayErrorMessage = (val, min, max, isRequired) => {
-            if (isRequired && String(val).length === 0) {
+          const displayErrorMessage = (val) => {
+            const { min, max, isRequired } = props;


Suggested change

const { min, max, isRequired } = props;

const { min, max, required } = props;

clairesunstudio · 2019-03-18T15:58:14Z

react/src/components/atoms/forms/InputNumber/index.js

-            if (isRequired && String(val).length === 0) {
+          const displayErrorMessage = (val) => {
+            const { min, max, isRequired } = props;
+            if (isRequired && is.empty(val)) {


Suggested change

if (isRequired && is.empty(val)) {

if (required && is.empty(val)) {

react/src/components/atoms/forms/InputNumber/index.js

Co-Authored-By: smurrayatwork <smurrayatwork@gmail.com>

…yflower into react/DP-12921--input-min-max

avrilpearl · 2019-03-19T13:53:46Z

react/src/components/atoms/forms/InputCurrency/index.js

-                });
-              }
-            },
-            onFocus: (e) => {


Can you put this unformatting logic back in this pr?

avrilpearl · 2019-03-19T13:54:12Z

changelogs/DP-12921.md

+Changed
+- (React) [InputNumber] DP-12921: Limits the component from changing value between the min and max passed.
+- (React) [InputCurrency] DP-12921: Limits the component from changing value between the min and max passed.
+- (React) [InputCurrency] DP-12734: Prevents changing currency to numbers from strings on focus.


can you update the changelog here - removing this per comment below.

Prevents min/max from being past on InputNumber and InputCurrency.

8c6f255

smurrayatwork added WIP - Do not merge React labels Mar 11, 2019

Adds changelog.

571d8ba

smurrayatwork added Ready For Internal Review and removed WIP - Do not merge labels Mar 11, 2019

smurrayatwork requested review from clairesunstudio and avrilpearl March 11, 2019 13:46

smurrayatwork added 4 commits March 11, 2019 10:00

Adds back in min/max controls, removes unused code in Input.

8cc6fdd

Merge branch 'react/DP-12921--input-min-max' of github.com:massgov/ma…

1ecee32

…yflower into react/DP-12734--currency-with-focus

Prevents changing input value to number on focus.

cfb487d

Updates changelog, prevents changing inputcurrency from strings to nu…

6bc16f6

…mbers on focus.

Prevents going beyond min/max onBlur of InputCurrency or InputNumber.

48d39ba

clairesunstudio reviewed Mar 15, 2019

View reviewed changes

change inputNumber story min max to 0 100

9c8426e

smurrayatwork and others added 8 commits March 15, 2019 10:41

Updates backstop.

8002826

Merge branch 'react/DP-12921--input-min-max' of github.com:massgov/ma…

a809776

…yflower into react/DP-12921--input-min-max

Fixes onBlur bug.

e578597

Bug fixes.

e9b3139

change story default min/max for ease of testing

f3e0058

Fixes bug that prevented InputNumber from being empty.

f9b628e

Merge branch 'react/DP-12921--input-min-max' of github.com:massgov/ma…

33ad387

…yflower into react/DP-12921--input-min-max

Removes unused imports, code styling fixes.

a365d38

clairesunstudio reviewed Mar 18, 2019

View reviewed changes

react/src/components/atoms/forms/InputNumber/index.js Show resolved Hide resolved

clairesunstudio reviewed Mar 18, 2019

View reviewed changes

react/src/components/atoms/forms/InputNumber/index.js Show resolved Hide resolved

clairesunstudio reviewed Mar 18, 2019

View reviewed changes

react/src/components/atoms/forms/InputNumber/index.js Outdated Show resolved Hide resolved

clairesunstudio reviewed Mar 18, 2019

View reviewed changes

react/src/components/atoms/forms/InputNumber/index.js Outdated Show resolved Hide resolved

smurrayatwork and others added 5 commits March 18, 2019 12:31

Fixes onBlur to work with min/max, empty values.

8ab38df

Update react/src/components/atoms/forms/InputNumber/index.js

f54ea83

Co-Authored-By: smurrayatwork <smurrayatwork@gmail.com>

Update react/src/components/atoms/forms/InputNumber/index.js

f273aba

Co-Authored-By: smurrayatwork <smurrayatwork@gmail.com>

Fixes required validation on InputNumber.

1d2ded6

approve screenshots

fcd4008

clairesunstudio approved these changes Mar 18, 2019

View reviewed changes

Merge branch 'react/DP-12921--input-min-max' of github.com:massgov/ma…

ad329d9

…yflower into react/DP-12921--input-min-max

avrilpearl reviewed Mar 19, 2019

View reviewed changes

smurrayatwork and others added 5 commits March 19, 2019 11:01

Fixes onChange formatting for InputCurrency.

6591335

Removing on the fly formatting due to bugs with cents onkeydown.

6bcff10

Bug fixes.

d81d02d

Bug fixes.

399de7c

remove removed functionality from changelog

095875d

avrilpearl merged commit 0dd4371 into develop Mar 20, 2019

avrilpearl deleted the react/DP-12921--input-min-max branch March 20, 2019 14:25

clairesunstudio mentioned this pull request Mar 20, 2019

Release 9.3.0 #513

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React/DP-12921: Prevents min/max from being past on InputNumber and InputCurrency. #503

React/DP-12921: Prevents min/max from being past on InputNumber and InputCurrency. #503

smurrayatwork commented Mar 11, 2019 •

edited

Loading

clairesunstudio commented Mar 12, 2019 •

edited

Loading

clairesunstudio commented Mar 12, 2019 •

edited

Loading

clairesunstudio commented Mar 12, 2019 •

edited

Loading

clairesunstudio commented Mar 15, 2019

clairesunstudio Mar 15, 2019

smurrayatwork Mar 15, 2019

clairesunstudio commented Mar 15, 2019 •

edited

Loading

clairesunstudio Mar 18, 2019

clairesunstudio Mar 18, 2019

avrilpearl Mar 19, 2019

avrilpearl Mar 19, 2019

	const { min, max, isRequired } = props;
	const { min, max, required } = props;

	if (isRequired && is.empty(val)) {
	if (required && is.empty(val)) {

React/DP-12921: Prevents min/max from being past on InputNumber and InputCurrency. #503

React/DP-12921: Prevents min/max from being past on InputNumber and InputCurrency. #503

Conversation

smurrayatwork commented Mar 11, 2019 • edited Loading

Description

Related Issue / Ticket

Steps to Test

clairesunstudio commented Mar 12, 2019 • edited Loading

clairesunstudio commented Mar 12, 2019 • edited Loading

clairesunstudio commented Mar 12, 2019 • edited Loading

clairesunstudio commented Mar 15, 2019

clairesunstudio Mar 15, 2019

Choose a reason for hiding this comment

smurrayatwork Mar 15, 2019

Choose a reason for hiding this comment

clairesunstudio commented Mar 15, 2019 • edited Loading

clairesunstudio Mar 18, 2019

Choose a reason for hiding this comment

clairesunstudio Mar 18, 2019

Choose a reason for hiding this comment

avrilpearl Mar 19, 2019

Choose a reason for hiding this comment

avrilpearl Mar 19, 2019

Choose a reason for hiding this comment

smurrayatwork commented Mar 11, 2019 •

edited

Loading

clairesunstudio commented Mar 12, 2019 •

edited

Loading

clairesunstudio commented Mar 12, 2019 •

edited

Loading

clairesunstudio commented Mar 12, 2019 •

edited

Loading

clairesunstudio commented Mar 15, 2019 •

edited

Loading