Alpine dropdown component has unsupported attributes in LiveView 0.18

Phoenix Forum Questions / Help
, , ,
1

Hi all,

I have a Phoenix component for dropdown menus based on Dropdown Component — Alpine.js that works fine with Live View 0.17 but is not working with Live View 0.18, because the HTMLEngine complains about unsupported attributes like :aria-expanded, :aria-controls, and :id.

You can find the complete code on the Alpine page linked above, here’s an excerpt:

<button
  x-ref="button"
  x-on:click="toggle()"
  :aria-expanded="open"
  :aria-controls="$id('dropdown-button')"
  type="button"
>

The W3C Validator certainly doesn’t like those attributes but it doesn’t like others like x-on:click either, which Phoenix HTML does not complain about.

Should these attributes be accepted? Is there a way to bypass this validation?

1 Like
2

With 0.18 you afaik need to use the longform alpine attributes x-bind/…, which you can whitelist by prefix.

7 Likes
3

Thank you!

Using the longform attributes like x-bind:aria-expanded fixed the issue.

4

Do you think this should also work for the :keys in a x-for iteration?

From the example in for — Alpine.js could we then use x-bind:key="color.id" ?

5

I’d imagine so, but I’ve never used alpine in depth.

1 Like
6

Thanks, yes, from the docs it looks like : is just the shorthand for x-bind

https://alpinejs.dev/directives/bind#shorthand-syntax