<form>-wrapped inputs will copy data-clipboard-text value of the button on return

[1de]

🐛 Bug Report

formTag-wrapped inputs will copy button[data-clipboard-text]-value after pressing return-key to submit the form.

Expected Behaviour

pressing the return key shouldn't copy the "data-clipboard-text"-value of the button.

Actual Behaviour

pressing the return key fires the form AND copies the value of "data-clipboard-text" of the button.

To Reproduce

i've tried a minimal version of html, so i decided to use your demo in clipboard.js-master/demo/constructor-nodelist.html and wrapped input and button with form-tags, as follwing:

<form method="post" name="dasdsad">
  <input type="text" value="somehting" />
  <button data-clipboard-text="1">Copy</button>
</form>

<script src="../dist/clipboard.min.js"></script>

<script>
  var btns = document.querySelectorAll('button');
  var clipboard = new ClipboardJS(btns);
</script>

copy the code on top. put the cursor into the input[type="text] element, press enter. the form is submitted AND the number "1" is copied.

Browsers Affected

tried this in firefox

Operational System

on macOS monterey

Edit: this does not happen when the "Copy-Button" is e.g. a span. as long as the copy element is an "button"-element, this bug occurs.

[obetomuniz]

Thanks for report this issue @1de I agree, seems an unexpected behavior and I'll take a look at your example in order to try to mitigate a workaround using native APIs, and if needed, a bug fix proposal to avoid this weird behavior 😄

[obetomuniz]

Hey @1de, after further investigation, I noticed that if you pass type="button" for your <button> element the event bubbling issue will disappear. <button> is by default type submit, so when you press enter in your input element without additional treatment, you are submitting the form and indirectly calling the submit button. I created a JSFiddle in order to example. Let me know if you have more doubts.

Closing this issue once the reported problem not is related to the library.