Error when clicking item in dropdown

[chrisdel101]

Following the instructions didn't get this running so I ran the example and copied all the assets from there.
When I click on an item from the list I get

[saleyn]

Do you get it with the latest version 0.1.2? What is your version of Elixir, Phoenix, LiveView?

[Erfan1995]

Can you share your code?

[chrisdel101]

Elixir 1.17.1
I just started a new project from scratch so things should be the most recent possible as these were set by default.

I posted it to a repo rather than try to share it here: https://github.com/chrisdel101/phx-select-error-demo

Edit: not sure if it's runnable with psql, but if you do run it, go to /demo route to see select component.

[Erfan1995]

@chrisdel101
Your code looks fine except that it doesn't have the on_change attribute which is required.
on_change={fn opts -> send(self(), {:updated_options, opts}) end}
Though the lack of on_change should produce a different error, but try adding it and see if the error is gone.

[Erfan1995]

I cloned your code and ran it but don't see such error when clicking on the options.

[chrisdel101]

I added that exactly as you put it.

<Phoenix.LiveView.Components.MultiSelect.multi_select
  id="demo-select"
  options={[ %{id: 1, label: "Option1"},
    %{id: 2, label: "Option2"}]}
  on_change={fn opts -> send(self(), {:updated_options, opts}) end}/>

Is this what you meant? Do I need anything else just to get this package to work?
Or did you mean phx-change?

[chrisdel101]

I cloned your code and ran it but don't see such error when clicking on the options.

Really? Then I guess it's unfixable then? I think my Mac is running an older OS so maybe that's the reason? It'd be a bummer if this was a requirement to use this pkg.

I did start a new project from scratch just to be sure, and I got the same error in both cases. I tried chrome, FF and safari and it's the same on all three.

Thx for trying to help!

[larshei]

I am actually running into the same error.

On running the included mix task, the tailwind config was adjusted, but the task then stopped, as I have neither npmn nor yarn installed.

So I continued the installation based on the readme description:

• Copied hooks (index.js, multi-select-hook.js, theme-changer-hook.js) to <project_root>/assets/js/hooks. I noticed the multi-select-hook.js is not actually in the hooks folder in the example.
• Added hooks to app.js (import and to live socket)
• Did not add "tailwind scrollbar optimization"

The example application runs as expected.
@chrisdel101's example throws the same error (I removed the scrollbar optimization)

Elixir Version: .asdf/installs/elixir/1.16.1-otp-26/bin/elixir
LiveView: 1.0.0-rc.6