LiveView alpine modal uses deprecated @inner_content

maz · March 14, 2021, 4:12pm

So I’m following this tutorial here:

and the technique is to use <%= @inner_content.([]) %> to render the dialog content.

andreaseriksson/tutorials/blob/master/lib/tutorial_web/live/modal_component.ex#L42


      <div x-show="open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full">
        <div @click.away="open = false" class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="hidden sm:block absolute top-0 right-0 pt-4 pr-4">
            <button type="button" @click="open = false" class="text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150">
              <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
            </button>
          </div>
          <!-- CONTENT -->
          <%= @inner_content.([]) %>
        </div>
      </div>
    </div>
    """
  else
   ~L"""
   <div id="closed-modal-<%= @id %>"></div>
   """
  end
end

however this was deprecated in LiveVIew 0.15 in favor of render_block()

So in this case I assume I would do something like: <%= render_block(@inner_block, value: @value) %> but I’m not sure what I should pass in for the second param. I have tried <%= render_block(@inner_block, []) %> and it silently fails. Not sure what to do here. Any ideas?

Michael