Custom Element Button Acting as Form Submit after publish

Ask the community
, ,
1

Why is my button acting as a form submit after adding it within the Form?

In preview it works fine, but after publish it’s acting as a Form Submit button

Custom Element:

class CustomBirdieButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
    <style>
      :host {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: auto;
        min-height: auto;
      }
      .birdie-button-customele {
        display: flex;
        align-items: center;
        gap: 8px;
        background-color: #d32f2f;
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-family: sans-serif;
        transition: all 0.2s ease;
      }
      .birdie-button-customele:hover {
        background-color: #b71c1c;
      }
    </style>
    <button class="birdie-button-customele">
      <img src="https://img.icons8.com/ios-filled/20/ffffff/monitor.png"/>
      Record my screen
    </button>
  `;

    const button = this.querySelector(".birdie-button-customele");
    button.addEventListener("click", () => this.toggleBirdie());

    this.setupBirdie(); 
  }

  setupBirdie() {
    const host = this;
    window.my_callback_recorder_opened = function () {
      debugger;
      alert("The screen recorder has been opened!");
      console.log("The recorder popup has been opened");
    };
    window.my_callback_recorder_closed = function () {
      debugger;
      alert("The screen recorder has been closed!");
      console.log("The recorder popup has been closed");
      host.style.removeProperty("min-width");
      host.style.removeProperty("min-height");
      // Delay opening slightly to ensure layout applies
      setTimeout(() => {
        host.style.setProperty("min-width", "500px", "important");
        host.style.setProperty("min-height", "100px", "important");
      }, 1000); // 100ms is usually enough, you can increase if needed
    };
    window.my_callback_recording_started = function () {
      console.log("The recording has just started");
    };
    window.my_callback_recording_stopped = function () {
      console.log("The recording has just stopped");
    };
    window.my_callback_recording_posted = function (link) {
      console.log("The recording was sent, the sharing link is:", link);
    };

    window.birdieSettings = {
      app_id: "xxxxxx",
      onRecorderOpened: window.my_callback_recorder_opened,
      onRecorderClosed: window.my_callback_recorder_closed,
      onRecordingStarted: window.my_callback_recording_started,
      onRecordingStopped: window.my_callback_recording_stopped,
      onRecordingPosted: window.my_callback_recording_posted,
      autoclose_recorder: false
    };

    // Load the Birdie widget script once
    if (!window._birdieScriptLoaded) {
      const script = document.createElement("script");
      script.src = `https://app.birdie.so/widget/${window.birdieSettings.app_id}`;
      script.async = true;
      document.body.appendChild(script);
      window._birdieScriptLoaded = true;
    }
  }

  birdieClosed() {
    alert("The screen recorder has been closed!");
    console.log("The recorder popup has been closed");
  }

  toggleBirdie() {
    const host = this;
    debugger;

    if (window.zest && window.zest.widget) {
      const isOpen = window.zest.widget.opened();

      if (isOpen) {
        window.zest.widget.close();
        host.style.removeProperty("min-width");
        host.style.removeProperty("min-height");
        // Delay opening slightly to ensure layout applies
        setTimeout(() => {
          host.style.setProperty("min-width", "500px", "important");
          host.style.setProperty("min-height", "100px", "important");
        }, 1000); // 100ms is usually enough, you can increase if needed
      } else {
        // Set size first
        host.style.setProperty("min-width", "500px", "important");
        host.style.setProperty("min-height", "300px", "important");

        // Delay opening slightly to ensure layout applies
        setTimeout(() => {
          window.zest.widget.open();
        }, 1000); // 100ms is usually enough, you can increase if needed
      }
    } else {
      console.warn("Birdie widget not loaded yet");
    }
  }
}

customElements.define("wix-default-custom-element", CustomBirdieButton);