Reset the state of the component and its inputs when a different props.value is passed in #155

acusti · 2021-10-15T01:00:17Z

note that this branch was branched off of #154 and will be easier to review in isolation from those changes.

this PR simplifies component state handling and updates state.value and state.input when props.value changes to enable resetting the component’s state as requested in #129 (also provides a better solution for #69). it also adds fallbacks and checks to work with props.value being null or undefined. these changes enable the following pattern, which i added as a new “With Reset” story to the docs:

function Resettable() {
    const [value, setValue] = React.useState(null);

    return (
        <Fragment>
          <ReactCodeInput onChange={() => setValue(null)} value={value} />
            <button onClick={() => setValue('')}>Reset</button>
        </Fragment>
    );
}

commits are atomic and explain in detail what changes are contained in the PR.

changes also include upgrading the package-lock.json file for the latest version of npm (7.24.0)

there is a direct import from prop-types in ReactCodeInput.js

prevents this error after upgrade to storybook v5: webpack/webpack#8082

no more need to add sass loader manually by extending the webpack config

Array.prototype.map() won’t early return if you return true, but Array.prototype.some() will

also, fix naming typo from chart → char

cleans up the code where that variable is used and ensures the value being used is always a number (e.g. in the else condition of the ternary for determining the index within this.textInput when assigning newTarget)

• fixes 40818419#62 (reproducible in chrome and safari also) • removes need for special keydown handling for ↑/↓/E keys • removes need for styling to remove default input type="number" browser styles • leaves filtering of non-numeric values to existing logic in handleChange (works for pasted text and keyboard entry)

when using maxLength, if user has "623 293" and pastes it into an input with fields={6}, the last digit (“3”) won’t be pasted because the max length on the focused input is 6 digits

better to check that the rendered input is disabled rather than that state has { disabled: true }

codecov · 2021-10-15T01:01:34Z

Codecov Report

Merging #155 (3593aa9) into master (2599c5d) will increase coverage by 0.44%.
The diff coverage is n/a.

❗ Current head 3593aa9 differs from pull request most recent head 61d697e. Consider uploading reports for the commit 61d697e to get more accurate results

@@            Coverage Diff             @@
##           master     #155      +/-   ##
==========================================
+ Coverage   96.55%   96.99%   +0.44%     
==========================================
  Files           2        2              
  Lines         145      133      -12     
  Branches       41       36       -5     
==========================================
- Hits          140      129      -11     
+ Misses          5        4       -1

Impacted Files	Coverage Δ
src/utils.js
src/ReactCodeInput.js
ReactCodeInput.js	`96.72% <0.00%> (ø)`
utils.js	`100.00% <0.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2599c5d...61d697e. Read the comment docs.

also, remove empty string default for props.value to enable alternating between passing undefined and empty string as props.value to clear the component input values (because {value: undefined} no longer gets defaulted to empty string)

also, add getValueFromProps util to handle props.forceUppercase and null | undefined

…#129 makes it possible to reset ReactCodeInput’s internal state and the values it renders in its inputs by passing in an updated this.props.value

…0818419#129

acusti added 24 commits October 12, 2021 12:20

Remove yarn.lock file (already have package-lock.json)

ab01fe1

Remove unused dev dependencies

ac537f4

changes also include upgrading the package-lock.json file for the latest version of npm (7.24.0)

Remove direct react + react-dom dependencies

174a4f0

Add prop-types to peer dependencies

acc76bc

there is a direct import from prop-types in ReactCodeInput.js

Upgrade to latest v3 version of webpack-cli

4a4e53e

prevents this error after upgrade to storybook v5: webpack/webpack#8082

Upgrade to latest version of sass

b2023cd

Upgrade circle CI docker image to latest stable node

fe4ae2d

Upgrade to latest v5 of storybook

4f1c037

no more need to add sass loader manually by extending the webpack config

Build artifacts for storybook v5 + .gitignore updates

94c2324

Remove unused import from ReactCodeInput story

4ba749a

Enable early return from filterKeyCodes check

d971717

Array.prototype.map() won’t early return if you return true, but Array.prototype.some() will

Assert if input is type=text, not if state.type is text

2731bf8

Simplify constructor for loop by including < 32 in condition

dc7f360

Remove redundant state().fields test assertion

9db041f

Remove unused this.state.fields key

9cf9063

Remove redundant this.state.type key and use props

1ac08b8

Replace .map() → .forEach() when not using returned value

ca85933

also, fix naming typo from chart → char

Add targetIndex variable for e.target.dataset.id

50293d5

cleans up the code where that variable is used and ensures the value being used is always a number (e.g. in the else condition of the ternary for determining the index within this.textInput when assigning newTarget)

Update focus to input after last pasted value or last input 40818419#70

631bae4

Remove maxLength so filtered pasted values aren’t truncated

3403072

when using maxLength, if user has "623 293" and pastes it into an input with fields={6}, the last digit (“3”) won’t be pasted because the max length on the focused input is 6 digits

Update props.disabled test to assert against render inputs

23a5b4d

better to check that the rendered input is disabled rather than that state has { disabled: true }

Hoist defaultInputStyle out of state into a static constant

e6ef290

Strip state down to input + value (the other values never update)

1236d1f

acusti changed the title ~~Reset the state of the when a different props.value is passed in~~ Reset the state of the component and its inputs when a different props.value is passed in Oct 15, 2021

acusti force-pushed the allow-reset branch from 5a62db3 to 3593aa9 Compare October 16, 2021 00:51

acusti added 3 commits October 15, 2021 17:52

Add getInputArrayFromProps util, use it to initialize this.state.input

643eda9

also, add getValueFromProps util to handle props.forceUppercase and null | undefined

Update state.value + state.input on props change 40818419#69 40818419…

9affb68

…#129 makes it possible to reset ReactCodeInput’s internal state and the values it renders in its inputs by passing in an updated this.props.value

acusti added 3 commits October 15, 2021 17:52

Only reset state when this.props.value has changed

d952c81

Add story example to illustrate resetting ReactCodeInput 40818419#69 4…

254ba99

…0818419#129

Remove duplicate ReactCodeInput import from stories

61d697e

acusti force-pushed the allow-reset branch from 3593aa9 to 61d697e Compare October 16, 2021 00:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reset the state of the component and its inputs when a different props.value is passed in #155

Reset the state of the component and its inputs when a different props.value is passed in #155

acusti commented Oct 15, 2021 •

edited

codecov bot commented Oct 15, 2021 •

edited

Reset the state of the component and its inputs when a different props.value is passed in #155

Are you sure you want to change the base?

Reset the state of the component and its inputs when a different props.value is passed in #155

Conversation

acusti commented Oct 15, 2021 • edited

codecov bot commented Oct 15, 2021 • edited

Codecov Report

acusti commented Oct 15, 2021 •

edited

codecov bot commented Oct 15, 2021 •

edited