tagify icon indicating copy to clipboard operation
tagify copied to clipboard

Tagify Input Adds Unexpected \r\n Causing Incorrect isDirty State in react-hook-form in setting's mix mode.

Open jktilavat opened this issue 3 months ago • 3 comments

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

jktilavat avatar Sep 04 '25 11:09 jktilavat

Are you talking about tagify in mix-mode?

yairEO avatar Sep 06 '25 16:09 yairEO

Yes, this issue is occurring in mix-mode.

jktilavat avatar Sep 08 '25 08:09 jktilavat

This won't be fixed.. sorry. I do not have the time capacity for this

yairEO avatar Nov 01 '25 13:11 yairEO