Do the hooks work the same for a live_view as for a live_component?

Trini · August 16, 2023, 5:22pm

Hello, how are you? I have a question. The hooks work the same for a live_view as for a live_component.

my question arises from a component that uses a hook to show tags

in the live_view it shows it without problems but in the live_component it lets me use it but it doesn’t show the selected tags and I think that maybe the problem is that it is not incorporating the hook and I have to do it manually

and in case you have to make adaptations to the hook to be usable in the live_component
Where can I find information on necessary modifications?

sodapopcan · August 16, 2023, 6:24pm

It’s unclear if you are talking about JS hooks or LiveView hooks. Either way, it’s very hard to help without seeing some code.

Trini · August 16, 2023, 6:41pm

the hook is a next js

github.com

saleyn/phx-multi-select/blob/main/assets/multi-select-hook.js

// Multi Select Hook
// =================
// Phoenix LiveView hook for the multi_select live component

const MultiSelectHook = {
  wasWrapped: false,
  oldFilterVal: "",
  id:     null,
  input:  null,
  iconS1: null,
  iconS2: null,

  mounted() {
    this.id      = this.el.id.replace(/-tags$/, '')
    this.filter  = document.getElementById(`${this.id}-filter`)
    this.inputS1 = document.getElementsByName(`${this.id}-flt-check`)[0]
    this.iconS1  = document.getElementById(`${this.id}-flt-check`)
    this.iconS2  = document.getElementById(`${this.id}-flt-clear`)

    // Client-side value filtering with filtering value sent to server

This file has been truncated. show original

and what is happening to me is that it behaves in different ways in a live_view (in which it works correctly)
and in a live_component in which the logic of the component works but not the part of the js that I think is what makes the tags work

sodapopcan · August 16, 2023, 6:49pm

The code you shared is from a library, so it’s not a huge help. I would suggest opening an issue there on how to use it with live components. My guess is that you aren’t sending the updated state from the LiveView to the component, but I can’t know that without seeing the component code (and also I don’t know this library).

Trini · August 16, 2023, 7:21pm

If currently I asked the author if he had a case similar to mine… but my question is if a Js hook designed for a live_view (which I think is the case for this one) would be equally functional on a live_component, something to confirm or dismiss the fact that the hook is the problem

because the component itself works for me, what doesn’t work for me are the tags and the only place I saw that they handled it is in the hook.

equally the logic of the component is handled here:

github.com

saleyn/phx-multi-select/blob/main/lib/multi_select.ex

defmodule Phoenix.LiveView.Components.MultiSelect do
  @moduledoc """
  Multi-select component for Phoenix LiveView.

  Use in your HEEX templates with:
  ```
  <.multi_select
    id="multi"
    options={
      %{id: 1, label: "One"},
      %{id: 2, label: "Two"},
    }
  >
  ```

  See `multi_select/1` for details.
  """
  use    Phoenix.LiveComponent
  import Phoenix.HTML
  alias  Phoenix.LiveView.JS

This file has been truncated. show original

benwilson512 · August 16, 2023, 7:22pm

The only notable difference between the behavior in a live view vs a live component is that you have to make sure that the target is set correctly for the live component if you are sending events back and forth between the JS and the live component.

Trini · August 16, 2023, 7:30pm

that is to say that basically the live_component needs an event that makes it update… when marking an option for example, and possibly not having that event and not updating, does it cause me not to show the selected tags?