Cannot click into text input within a repeater on Firefox

[njoswald]

Reproduction

https://formkit.link/61b91f003bca0ef1c221ed2327916904

Describe the bug

When creating a text input inside a repeater, you are not able to click inside or highlight the text present in the input. This appears to occur for any text input. I have tested text, text area, and email inputs.

This issue is only occurring with Firefox at the moment, and I have confirmed that you can click into the text on Chrome and Edge. I have not tried any other browsers.

This issue also only occurs when "draggable='true'" is set as an attribute for the repeater.

I was able to reproduce the issue in the playground, and confirmed that it only occurs on Firefox.

Environment

• OS: Windows 11
• Browser Firefox
• Version 0.126.11 and 1.6.5

[philipstarkey]

I think this might be an upstream issue in @formkit/drag-and-drop. It looks like this behaviour is a long standing (12 year old) bug in firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=800050

The workaround as explained in that link would be to only set the draggable=true html attribute (not the prop in Vue, but the HTML attribute set internally) on mouse-down on the drag handle. Presumably this is being set by @formkit/drag-and-drop and not the Pro component?

[sashamilenkovic]

@philipstarkey You are correct. This is on our queue.