In a nutshell the issue I’m facing is that every time I register alpine’s @ or x-on event handler, two are registered and called when the action is performed.

The issue is solved if I comment liveSocket.connect(), which leads me to believe the problem is in the interoperation of liveSocket and Alpine.

I’ve circled the internet without success. Has anyone had this issue and solved it?

Packages:
Phoenix: 1.6.2
Phoenix Live View: 0.16.4
Surface: 0.6.1
Alpinejs: 3.3.5 & 3.4.2

Surface component:

defmodule TimetaskApp.WeekCalendar do
  use Surface.LiveComponent

  prop hours, :list, required: true

  prop dates, :list, required: true

  @impl true
  def render(assigns) do
    ~F"""
    <div class="w-full h-full flex flex-col" style="height: calc(100vh - 100px)" id="week-calendar">  {!-- Calendar --}
      <div class="h-full flex-1 flex flex-row relative">
        <div
          class="flex-1 flex"
          id="week-calendar-columns"
          :hook="WeekCalendar"
          x-init="fromHour = +$el.dataset.fromHour; toHour = +$el.dataset.toHour;"
          x-data="week_calendar_data"
          data-from-hour={List.first(@hours)}
          data-to-hour={List.last(@hours)}
        >
          <div
            class="flex-1 flex"
            id="week-calendar-days-container"
            x-ref="days_container"
          >
            {#for date <- @dates}
              <div
                id={"day_col_#{format_date(date)}"}
                data-date={format_date(date)}
                class="flex-1 border-r border-tt-border-calendar relative"
                @mousedown.stop="startNewTimebox($event, $el.dataset.date)"
              >
              </div>
            {/for}
          </div>
        </div>
      </div>
    </div>
    """
  end
end

app.js:

import { Socket } from "phoenix"
import { LiveSocket } from "phoenix_live_view"
import topbar from "topbar"
import Alpine from "alpinejs"
import Hooks from "./_hooks"

import "./app/week_calendar.js"

window.Alpine = Alpine
Alpine.start()

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: Hooks,
  dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        window.Alpine.clone(from, to)
      }
    },
  },
});

topbar.config({ barColors: { 0: "#03ad8c" }, shadowColor: "rgba(0, 0, 0, .3)" })
window.addEventListener("phx:page-loading-start", info => topbar.show())
window.addEventListener("phx:page-loading-stop", info => topbar.hide())

liveSocket.connect()
window.liveSocket = liveSocket

./app/week_calendar.js

document.addEventListener("alpine:init", () => {
  Alpine.data("week_calendar_data", () => ({
    fromHour: 0,
    toHour: 0,
    newTimebox: null,
    startNewTimebox(event, date) {
      const fromTime = this.getTimeFromEvent(event)
      this.newTimebox = {
        date: date,
        fromTime: fromTime,
        toTime: null
      }
      console.log(`Start new timebox ${date} ${fromTime.hour}:${fromTime.minute}`)
    },
  }))
});

Chrome dev tools:

Screen Shot 2021-11-03 at 20.50.571200×164 29.1 KB

Chrome console: