React MixedTags input only saves the initial state passed to it

[khaziq-sfy034]

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed

React issue template: https://codesandbox.io/p/sandbox/tagify-react-issue-template-forked-dt6twg?file=%2Fsrc%2Findex.js

Explanation

• What is the expected behavior? The component should always save the updated state.

• What is happening instead? It does not saves the updated state if another field of the object is updated. Instead it refreshes to the original state.

• What error message are you getting? No error message.

So I have provided an example that shows some weird behaviour. What I am trying to do is to loop though a list of sections, each section has multiple options. So I update the value for the speaker using the dropdown. But when I type someting in the input it logs the old state (the initial state), instead I should be getting the updated state for each section along with the changed values.

For example:

• Change the speaker for one of the section and then type in the input box, you will see in the log that the speaker remains unchanged.
• But if you comment out the log sections statement inside the input field component and then only select the speaker don't type anything you will see the updated sections logged in the console.

So tagify stores only the initial state and updates it, so you lose the updated state that has been done by other component if you try to update the text of the section inside the onChange function.

I have tried the onChange with and without useCallback hook but the behaviour is same.

[yairEO]

The actual issue is that callback functions references cannot be updated or removed after Tagify is initialized via the React port.