Tagify Input Adds Unexpected \r\n Causing Incorrect isDirty State in react-hook-form in setting's mix mode. #1471
Description
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.