LiveSelect - Dynamic selection input component for LiveView

Your Libraries & OS Mentoring Libraries
, ,
41

Adding z-0 (z-index) to the div wrapper fixed it !
I unfortunately don’t understand it enough to explain why …

      <.live_select
        form={f}
        field={:currency_code}
        placeholder="Select a Currency"
        update_min_len={1}
        style={:daisyui}
      >
        <:option :let={option}>
          <div class="flex outline z-0">
            <img src={option.country_flag} class="avatar text-sm " />
            <%= option.currency_code <>
              " | " <> option.country_name <> " | " <> String.upcase(option.currency_name) %>
          </div>
        </:option>
      </.live_select>
42

Ok, then please open an issue and include code to reproduce the bug. A minimal example repo would be ideal. I’ll look into it asap. Thanks!

43

One more thing: how are you building your front-end assets, with esbuild or webpack? If you’re using webpack or similar I’d suggest you nuke your node_modules folder and try again to see if the latest code on main fixes your issue

1 Like
44

@trisolaran, your fix works perfectly !

I am using esbuild and did have some gremlins :frowning: The z-0 was a bunny trail …

Thank you for the fix.

-M

1 Like
45

What could be the reason for live_select to not pass events neither to the parent LiveView nor to the LiveComponent. I can see debug messages like “focus”, “blur”, “change” but no event handler ever gets hit by and event generated from the LiveSelect.

46

My bet would be that the js hooks are not properly set up. Check your browser’s console for errors. If everything looks good there, then please open an issue and share some code, I’ll look into it ASAP

47

[debug] Replied in 370µs
[debug] HANDLE EVENT “blur” in HelloWeb.TestLive.Index
Component: LiveSelect.Component
Parameters: %{“value” => “”}
[debug] Replied in 421µs
[debug] HANDLE EVENT “focus” in HelloWeb.TestLive.Index
Component: LiveSelect.Component
Parameters: %{“value” => “”}
[debug] Replied in 342µs
[debug] HANDLE EVENT “blur” in HelloWeb.TestLive.Index
Component: LiveSelect.Component
Parameters: %{“value” => “”}
[debug] Replied in 150µs

^^^ this is what I get in the iex console, also checked the browser’s console and no any errors there. So I guess no problems with the JS hooks.

48

I don’t see anything strange with your output. All those events are used internally by LiveSelect and consumed by the component. They’re not sent to your LiveView or LiveComponent. The only event that LiveSelect sends to the parent is live_select_change when you type something in the input field. Have you tried typing something? What happens when you do?

49

Hi @trisolaran, I saw the problem, your initial guess was correct, it was a an issue with the JS hooks. Thank you so much for your support :pray:

1 Like
50

Has anyone tried using Bootstrap CSS with this library? Does anyone have any designs saved in Bootstrap for sharing? I’m particularly interested in the Multiple selection mode.

Thanks a lot for possibly sharing and this nice library.

51

Thanks @John_Shelby. I’m not aware of anyone using it with Bootstrap. You can however pass the style: :none option to get a vanilla live_select component with no styles. Starting from there, you can inject your Bootstrap CSS classes using the styling options until you get something you’re satisfied with.

If you end up doing this and want to share the result, feel free to open a PR. We could add it as a third “out-of-the-box” style alongside tailwind and daisyui :slight_smile:

1 Like
52

Thanks for the reply @trisolaran

I don’t have much experience with Bootstrap. I’ve tried, but I haven’t created anything nice yet and I’m pressed for time :smiley: , if I still manage to create something I’m at least partially satisfied with, I’ll be happy to share it with the community. :slight_smile:

1 Like
53

Released version 1.1.0

Changes:

  • New phx-focus and phx-blur options. You can use these options to specify events to be sent to the parent LiveView/LiveComponent when the text input receives or loses focus. See the cheatsheet for a couple usage examples.
  • The live_select_change event is now sent directly from the JS hook instead of playing ping-pong between client and server. This saves a round-trip and should reduce response times.
  • The component now expects a single field assign of type Phoenix.HTML.FormField instead of separate form and field assigns (which is still supported but soft-deprecated with a warning)

Thanks to all who provided feedback!

2 Likes
54

Hi Max, have been out of action for the past 8 months … just picking back up.

There have been significant changes that I am catching up to in phoenix etc. Amazing how fast this ecosystem is moving (unfortunately, I have a lot of work to do on refactoring for updates/changes).

One of the things I am trying to figure out in the latest live_select are how to get certain behaviors working again … specifically - I was using multiple live_select components on a form that were “linked” i.e. the values returned were conditional upon the values of the other components eg. category & sub_category etc.

Am trying to figure out how this is handled in the final design … in the “live_select_change” event, I am seeing the field attribute populated with the form-name+field_name, which is a bit weird, how do I access the other live_select component values on the form from the triggered handle_event etc.

Any pointers ?

Thanks in advance …

55

Hi @milangupta . It’s hard for me to help without seeing any code. Sharing a minimal example with a precise description of what you’re trying to achieve would be great. Cheers.

56

Great library, thanks for open sourcing this. I see that one of the arguments for live_select component is options and would be my choice to populate current tags that belong to a resource I am editing, however, this argument can’t be overridden in case there is a new search and selection.

The library works fine for me for searching and adding tags to a resource but what about editing current tags? What do you suggest for edit forms?

Thanks

57

Thanks @pedroassumpcao ,

Yes it can :slight_smile: the options assign in the component can be set in the template but can be overridden anytime
by calling: send_update(LiveSelect.Component, id: live_select_id, options: new_options)
that’s what the live_select_change event is for.

58

Thanks for the reply, but I made a mistake in my question, I was talking about pre-populating the selected options and I tried using values what works fine for that, however, once value is set, it seems any other search and selection can’t be done.

Imagine the scenario where I have a resource that has multiple tags and I wanna edit them. I can pre-populate the current tags in value but I can’t add a new tag (or remove existing ones).

59

This is how all input elements in Phoenix.HTML.Form (or core components) work: if you set value explicitly, then that value is used.

If you don’t set it however, the current value of the input will be taken from the form.

LiveSelect is no different: make sure that the form is initialized with your resource, and live select will pick up the value from the form.

1 Like
60

I got it working, in my form component update/2 I send an update to live select component send_update(LiveSelect.Component, id: "live_select_component_id", value: current_tags). The current tags are defined and passed to my form component that utilizes live select component. This way, live select component value does not need to be set and current tags can be removed, or new tags can be searched and added.

I would expect that setting value in live_select would perform the same way I am doing through an explicit send_update but it does not, as it seems the value set always overrides any change in the selection.