STCOM-1319 Selection - consolidate/reduce onChange calls #2322
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.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Since the implemenation for handling value props from outside of the component, we notice instances of
onChange
handlers happening multiple times as per STCOM-1319 where a query search will remain intact afterresetAll
is pressed once. This was due to a new render cycle happening even prior to the updated state of the component landing. In class-based react implementation, we had a callback forsetState
so that we could run logic in a space where we were assured that state had updated. It's possible for us to write a hook that could accomplish something like, but I decided to try and revisit the usage of downshift's state within the component, and if we could solely rely on that state, we could consolidate the onChange calls within its handler.I destructured two new pieces from
downshift
's result, using theirselectedItem
and their update functionselectItem
- which I renamed toupdateSelectedItem
just to suit convention. I replaced our own state with this, and used theupdateSelectedItem
to update the selection when thevalue
prop updates, so that all possible ways for the value to change will pass throughdownshift
state handling/callback. Additionally, I checked the new selected item from state didn't match the providedvalue
prop before callingonChange
, limiting the onChange calls.It's still important to track internal changes until the selected value comes back as the
value
prop, so the sentinel valueawaitingChange
is still necessary, but depending ondownshift
's state versus our own allows thechosenItem
ref to be removed.The
useEffect
for updating whendataOptions
are updated was moved after theuseCombobox
hook so that it could observe theselectedItem
from the hook.