1.0 Regression: Unable to apply JS.show to list of DOM selectors

[iautom8things]

Environment

• Elixir version (elixir -v): 1.18.1
• Phoenix version (mix deps) 1.17.8
• Phoenix LiveView version (mix deps): 1.0.2
• Operating system: Mac
• Browsers you attempted to reproduce this bug on (the more the merrier): Chrome
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no:
  Yes

Actual behavior

When attempting to call JS.show(to: ["#id1","#id2"]) nothing happens and an error is logged to the JS console:

phoenix_live_view.js:2757 Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
    at phoenix_live_view.js:2757:58
    at Array.forEach (<anonymous>)
    at Object.exec (phoenix_live_view.js:2752:16)
    at phoenix_live_view.js:5259:24
    at phoenix_live_view.js:5059:37
    at LiveSocket.owner (phoenix_live_view.js:5056:33)
    at LiveSocket.withinOwners (phoenix_live_view.js:5059:12)
    at phoenix_live_view.js:5258:16
    at phoenix_live_view.js:5540:11
    at Object.debounce (phoenix_live_view.js:535:18)

Expected behavior

The DOM elements with the ids passed to JS.show should be shown.

This works in phoenix_live_view < 1.0.0:

Mix.install([
  {:phoenix_live_view, "~> 0.20", override: true},
  {:phoenix_playground, "~> 0.1.6"}
])

defmodule DemoLive do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  def render(assigns) do
    ~H"""
    <style>
      .hidden {display: none;}
    </style>
    <span id="hello" class="hidden">Hello</span>
    <span id="world" class="hidden">World</span>
    <button phx-click={Phoenix.LiveView.JS.show(to: ["#hello", "#world"])}>Show</button>

    <style type="text/css">
      body { padding: 1em; }
    </style>
    """
  end
end

PhoenixPlayground.start(live: DemoLive)

But breaks with phoenix_live_view > 1.0.0:

Mix.install([
  {:phoenix_live_view, "~> 1.0", override: true},
  {:phoenix_playground, "~> 0.1.6"}
])

defmodule DemoLive do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  def render(assigns) do
    ~H"""
    <style>
      .hidden {display: none;}
    </style>
    <span id="hello" class="hidden">Hello</span>
    <span id="world" class="hidden">World</span>
    <button phx-click={Phoenix.LiveView.JS.show(to: ["#hello", "#world"])}>Show</button>

    <style type="text/css">
      body { padding: 1em; }
    </style>
    """
  end
end

PhoenixPlayground.start(live: DemoLive)

[SteffenDE]

Hey @iautom8things,

I believe this worked by accident in the past. To must be either

• a string
• {:inner, string}
• {:closest, string}

In 0.20, the inner and closest options weren't there. The fact that a list of strings also worked is a happy accident, but was never part of the official API.

You can build a valid CSS selector to match both targets by combining the selectors with a comma:

<button phx-click={Phoenix.LiveView.JS.show(to: "#hello,#world")}>Show</button>

[iautom8things]

Thank you for teaching me something, @SteffenDE!

[SteffenDE]

You're welcome! :)