search

ton-connect / sdk

SDK for TON Connect 2.0 — a comprehensive communication protocol between wallets and apps in TON ecosystem
Apache License 2.0
326 stars 92 forks source link

[UI]: Generate <button type="button"> to use in HTML form #270

Open IlyaSemenov opened 1 month ago

IlyaSemenov commented 1 month ago

Is your feature request related to a problem?

I'm frustrated when I'm unable to use <div id="ton-connect"> to place the Wallet Connect button inside a HTML form.

If I do so, the generated <button> tag has no explicit type attribute and as such is treated as a form submit button. When user presses Enter in an input field to submit the form, the Wallet Connect UI pops up undesirably.

Reproduction:

  1. Open https://stackblitz.com/edit/vitejs-vite-7rbtag and wait for it to load.
  2. Type any number in the input field under "Deposit amount"
  3. Press Enter on the keyboard to submit the form (don't click "Submit").

Expected: only alert message shows.

Actual result: alert shows and Wallet Connect UI appears, too.

Describe the solution you'd like

Ideally, I would like <div id="ton-connect"> to generate <button type="button"> by default, and for those rare occasions when it actually needs to be a submit button, allow to override button type with <div id="ton-connect" data-button-type="submit">.

Describe alternatives you've considered

As a backwards compatible solution, just copy data-button-type attribute into <button type> if it's provided. Keep the default behavior unchanged (no explicit type).

Additional context

At first I was thinking it's a shortcoming in @townsquarelabs/ui-vue and reported it there:

https://github.com/TownSquareXYZ/tonconnect-ui-vue/issues/16

but then I figured it's an upstream problem.