Flowbite DatePicker not working inside .live_component

Phoenix Forum Questions / Help
,
1

Hi, I’, trying to create a live component that uses a flowbite plugin (a DatePicker) and for some reason it’s not working as intended. Let me explain:

If I use this code in the show.ex liveview the calendar get displayed correctly:

<div class="relative">
  <input datepicker datepicker-autohide type="text" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date">
</div>

But then I try to create a component with the same code:

  def render(assigns) do
    ~H"""
      <div class="relative">
        <input datepicker datepicker-autohide type="text" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date">
      </div>
    """
  end

And and then creating the component in the show.ex:

<.live_component module={MyAppWeb.DatePicker} id={"date_picker"}/>

For some reason that I can’t figure out, now the calendar does not display. Any ideas on what’s happening?

Thanks for your help :slight_smile:

2

You’re almost certainly going to need a hook and phx-update="ignore" on that element.