Hello,
I am using Phoenix 1.8.x where the modal core component has been removed.
I try to use DaisyUI modal component like this:
<!-- Button that opens modal -->
<.button onclick="add_item_modal.showModal()" variant="primary">
Add item
</.button>
<!-- The modal itself-->
<dialog id="add_item_modal" class="modal">
<div class="modal-box">
<button
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
onclick="add_item_modal.close()"
>
x
</button>
<h3 class="text-lg font-bold">Add item</h3>
<.form
for={@new_item_form}
phx-change="change_new_item_name"
phx-submit="add_new_item"
>
<.input field={@new_item_form[:name]} placeholder="Item name" />
<.button
type="submit"
variant="primary"
disabled={disable_add_item_button?(@new_item_form)}
>
Add
</.button>
</.form>
</div>
</dialog>
Within the modal there’s a form: a single input field where I want to type the name of the item. Add button is enabled or disabled based on whether the name is empty. Pressing close or Add buttons should close the modal.
It works just fine in terms of opening, displaying the form, closing. However, whenever I type a single character, the modal closes. Apparently, this happens because live view re-renders the UI and it does not keep track of the open state for modal.
To resolve this, I tried to implement a js hook, that would check open flag on mounted and updated, and reopen the modal if needed. This worked only to an extent: the modal got reopened, but the input field lost focus: i.e. after typing each character I had to click on the field again.
Could you please share best practices on how to work with forms inside modals?
Did I go the wrong way with the js hook altogether, or was that approach fixable?
