Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upGitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
Add hook for parent component to be notified when input value changes #932
Conversation
Text mask component directly modifies the input element's dom `value`. This commit adds a hook prop that can be used to notify parent components when the input's value changes so that they can update their own state to reflect the new value in the dom. This came up for me when using `MaskedInput` inside a `Formik` form. When the `mask` prop to `MaskedInput` changes, it can change the value of the input element and leave the value stored in `Formik` stale. With this `onSetInputValue` hook prop, we can provide a function that syncs the `Formik` state (via `setFieldValue`) when the `value` in the dom is changed. Repro here: https://codesandbox.io/embed/l7or5346wq
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Text mask component directly modifies the input element's dom
value. This commit adds a hook prop that can be used to notify parent components when the input's value changes so that they can update their own state to reflect the new value in the dom.This came up for me when using
MaskedInputinside aFormikform. When themaskprop toMaskedInputchanges, it can change the value of the input element and leave the value stored inFormikstale. With thisonSetInputValuehook prop, we can provide a function that syncs theFormikstate (viasetFieldValue) when thevaluein the dom is changed.Repro here: https://codesandbox.io/embed/l7or5346wq
Looking for feedback on general approach, naming, etc. Then I'll add documentation and tests as needed.