Correct way to toggle aria-expanded with LV.JS.toggle?

Phoenix Forum Questions / Help
,
1

Hi all, I’m sure something is escaping me but I just can’t seem to find the right combination to set/unset “aria-expanded: true” with the new JS.toggle() method in LiveView. I’m actually trying to re-implement/updated the dropdown toggle from the livebeats app: live_beats/lib/live_beats_web/components/core_components.ex at master · fly-apps/live_beats · GitHub

Nothing I do seems to work and I’m sure I’m just missing something super simple. Does anyone know the secret?

thanks!

2

I assume you mean JS.toggle_attribute? JS.toggle is not new and simply toggles visibility by setting style="display: none" and style="display: block" (whatever visible display type you tell it to).

Can you share what you’ve tried already?

3

Sorry - i didn’t keep the results of my random messing around. I tried everything here though: Toggle classes with Phoenix.LiveView.JS - #3 by Dabsy

I’ll look into toggle-attribute, thanks.

4

Oh my goodness how did i miss that. It even has aria-expanded in the example. I knew i was missing something obvious :joy:

Thanks!

1 Like
5

Actually, coming back to this - it still doesn’t seem to work as expected. Here’s a simple example:

  def test_button(assigns) do
    ~H"""
    <button
      id="cool-button"
      aria-expanded="false"
      phx-click={JS.toggle_attribute({"aria-expanded", "true", "false"}, to: "#cool-button")}
    >
      toggle
    </button>
    """
  end

No amount of clicking seems to change the attribute. It renders as this:

  <button id="cool-button" aria-expanded="false" phx-click="[["toggle_attr",{"to":"#cool-button","attr":["aria-expanded","true","false"]}]]">
    toggle
  </button>

I can see exec_toggle_attr in the JS code so i know the liveview should be up to date. Any more ideas?

6

Cool buttons are the best buttons! :smiley:

You likely want to: "#cool-button" should be to: "#id-of-div-you-want-expand" as I assume you don’t want to toggle the button itself?

def test_button(assigns) do
  ~H"""
  <button
    id="cool-button"
    phx-click={JS.toggle_attribute({"aria-expanded", "true", "false"}, to: "#menu")}
  >
    toggle
  </button>

  <nav aria-expanded="false" id="menu">
    Cool stuff
  </nav>
  """
end
7

Haha well, I was just trying to break it down to the simplest thing possible for debugging purposes. The actual code is a proper dropdown menu but it’s my habit to just get something working and then build on that.

Your example doesn’t work for me, it also does nothing. The aria-expanded property of #menu doesn’t change. Does it work for you?

8

Ah yes, I was just making sure!

It does! If you copy-paste my code does it work? You may just have one of those dang little typos or something.

9

OK, the plot thickens. I phx.new’d a brand new app with 1.7.11, copied it in and it works there. Evidentally my upgrade of liveview et al is not as functional as I thought it was.

I’ve copied over /priv/static/app.js etc and will mess around to see what’s going on. Maybe a good time to learn how these files are actually being included in the first place, a deps update evidentally wasn’t enough to do the trick…

10

That’s actually surprising. Have you tried the Elixir version of turning it off and on again?

$ rm -rf deps _build && mix do deps.get, compile

Another possibility is that your browser has the liveview.js file cached in development (although I think that file got split up recently).

11

OK. I tracked it down to some legacy live-views.js hooks file which was somehow breaking only that. I’ve now terminated it with extreme prejudice. So strange that it didn’t also break other things, like JS.toggle() - if everything else hadn’t worked I would have suspected something in the assets from the beginning. But no, it only broke that. Bizarre.

Anyway - thank you for all the help and confirming that what i was doing actually should have worked all along. Next time, I’ll check in a new, clean project first…

And now, if you’ll excuse me, I’m off to have a little “chat” with the person who wrote that hook file…

1 Like