Tagify Input Adds Unexpected \r\n Causing Incorrect isDirty State in react-hook-form in setting's mix mode.
When using react-hook-form with Tagify input Component, the value returned from the input includes an unexpected trailing \r\n, which causes react-hook-form’s isDirty to evaluate to true even when there are no meaningful changes to the form data. This affects form submission behaviour, especially the submit button’s disabled state.
- Also show the original input in the attachment file
Scenario
- Using react-hook-form's Controller to manage form state
- Using Tagify-based input component
- Relying on isDirty to control the disabled state of the submit button
âť— Problem
- The value returned from Tagify includes an extra \r\n even when it's visually empty or when tags are added.
- This causes react-hook-form to detect the form as dirty (isDirty = true), even though the actual content hasn't changed meaningfully.
- Attempting to strip \r\n via string manipulation resolves the isDirty issue, but introduces caret position issues — typing in the input causes the cursor to jump to the beginning of the field.
âś… Expected Behaviour
- The input value should not append an extra \r\n.
- When cleared, it should return "" or match the initial value.
- Manual workarounds (like .replace(/\r\n$/, '')) should not cause caret/cursor issues.
https://github.com/user-attachments/assets/523f39dd-35d7-433a-a414-c597a79af807
Are you talking about tagify in mix-mode?
Yes, this issue is occurring in mix-mode.
This won't be fixed.. sorry. I do not have the time capacity for this