Phoenix LiveView + HeadlessUI

home.ex

defmodule PhoenixHeadlessuiWeb.HomeLive do
  @options [
    %{value: "ck", label: "Clark Kent"}
  ]

  def render(assigns) do
    ~H"""
    <x-combobox
      phx-hook="PushEvent"
      phx-update="ignore"
      id="react-combobox"
      options={Jason.encode!(@options)}
      value={@selected}
    />
    """
  end

  def handle_event("select", %{"value" => value}, socket) do
    {:noreply, assign(socket, :selected, value)}
  end
  
  # ...
end

PushEventHook.js

const PushEventHook = {
  mounted() {
    const target = this.el.attributes["phx-target"]?.value

    this.el.__pushEvent = (event, value, onReply = () => {}) =>
      target
        ? this.pushEventTo(target, event, value, onReply)
        : this.pushEvent(event, value, onReply)
  }
}

WebComponent.jsx

export default class ComboboxWebComponent extends HTMLElement {
  connectedCallback() {
    // ...
    this.render()    
  }

  attributeChangedCallback(attr, value) {
    this.render()
  }

  render() {
    const options = JSON.parse(this.getAttribute('options'))
    const value = this.getAttribute('value')
    const onSelect = ({ value }) => {
      this.__pushEvent("select", { value })
    }

    this.__reactRoot.render(
      <Combobox options={options} value={value} onSelect={onSelect} />
    )
  }

  // ...
}

customElements.define('x-combobox', ComboboxWebComponent)