State change occurs before hitting reducer on Enter key
okonet opened this issue · comments
downshift
version: 7.6.0node
version: 20npm
(oryarn
) version: 1.9
What you did:
I was trying to implement a customer request to keep the input's field value intact after selecting. So I tried doing this in the stateReducer
:
const { changes, type } = actionAndChanges;
switch (type) {
case stateChangeTypes.InputKeyDownEnter:
case stateChangeTypes.ItemClick:
return {
...changes,
inputValue: state.inputValue, // Keep the previous input value.
};
default:
return changes;
}
That didn't work so after printing the state
and changes
I found out that it's already having both selectedItem
and inputValue
set. In my understanding that should happen in the reducer, so the state
should not have those values set, and changes
should. After returning changes, the new state should be updated.
What happened:
![CleanShot 2023-07-04 at 09 58 08@2x](https://private-user-images.githubusercontent.com/11071/250808171-33bae4dc-9fe5-400f-81f8-ccf924b038f0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTI0OTUyNzMsIm5iZiI6MTcxMjQ5NDk3MywicGF0aCI6Ii8xMTA3MS8yNTA4MDgxNzEtMzNiYWU0ZGMtOWZlNS00MDBmLTgxZjgtY2NmOTI0YjAzOGYwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA0MDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNDA3VDEzMDI1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRiZjI1ZjEyMzQ3YmI0OGY4YjI0YThhZWNjMjdhZTQ1MjU5NTk2YTVlYmMyMjk2ZGM5YTk4N2UzNDFmZjY3OWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.6jUlyzEXsfUGaV4hO08R-5B5M-BpOGtSXpkVM759Igo)
Suggested solution:
I'm not sure but it seems like the state was already update prior the reducer function was called.
I think it might be a duplicate of #759
@okonet can you create a full code sandbox with the issue you are facing? There may be something wrong with your implementation.
You can also check our examples repo: https://codesandbox.io/s/github/kentcdodds/downshift-examples
You will find a stateReducer example there for useCombobox, if that's what you are using. Just replace the uppercase thing from there with state.inputValue and it should be good to go. Thanks!