Beste way to listen for modal open

[mauritskorse]

What is the best way to listen for a modal being opened?
I have two ways right now, but maybe there is a better / more native approach?

I need to call a script that only can be loaded once the modal is visible.

<flux:modal>
  <div x-data x-init="
    console.log($el.closest('dialog'));
    $el.closest('dialog')._dialogable.onChange((e) => { console.log(
        'open onchange event', 
        $el.closest('dialog').hasAttribute('open'), 
        new Date().getMilliseconds()
    ) });
    "
    x-on:modal-show.document="if($event.detail.name == $el.closest('dialog').dataset.modal){ console.log(
        'open on dispatched event', 
        $el.closest('dialog').hasAttribute('open'),
        new Date().getMilliseconds()
    )}"
    >
  </div>
</flux:modal>

This is the result of the console log:

open on dispatched event true 828
open onchange event true 896

After a couple of tries, the onchange event always fires about 15-70 ms later.

Of course it would be great if there is a native oncallbacks we could:
i.e. onBeforeShow, onShow, onBeforeClose, onClose.

[jeffchown]

@mauritskorse How about something like this? (then you could add a $listeners array to the component to call a method that sets $showModal = true; for response to dispatched events):

Volt component:

<?php

use Livewire\Volt\Component;

new class extends Component {
    public bool $showModal = false;
}; ?>

<div>
    <flux:button x-on:click="$wire.$set('showModal', true)">Show Modal</flux:button>

    <flux:modal wire:model="showModal" class="md:w-96">
        <div class="space-y-6">
            <div>
                <flux:heading size="lg">Update profile</flux:heading>
                <flux:subheading>Make changes to your personal details.</flux:subheading>
            </div>

            <flux:input label="Name" placeholder="Your name" />

            <flux:input label="Date of birth" type="date" />

            <div class="flex">
                <flux:spacer />

                <flux:button type="submit" variant="primary">Save changes</flux:button>
            </div>
        </div>

        <template x-if="$wire.showModal">
            <script>console.log('modal visible')</script>
        </template>
    </flux:modal>
</div>

[joshhanley]

@mauritskorse please don't open feature requests for questions. Please open an issue instead. I'm going to close this as it's not a feature request at the moment.

[mauritskorse]

ah, sorry. Didn't know that the discussions section is now only for feature requests. I didn't really think this was an issue and thought it might be useful to see if the community has some ideas on this.

On the other hand, it is somewhat of a feature request ;) Having some more js callbacks on components would be great as it allows for more optimistic ui handling.

[joshhanley]

@mauritskorse Flux discussions have only been feature requests. Can I just confirm how you manage to create the discussion without it saying feature request? Maybe we have something broken with the templates.

Yeah maybe, but as it's written it's a question 😉. I'm not yet sure if there is a good way as I haven't had a chance to have a look into it. Feel free to submit a feature request with your ideal API though and a concrete example of how/why you would use it, so we can consider it 🙂

[mauritskorse]

@jeffchown, thanks. Yes, that would be a solution indeed. However I was looking more for a optimistic ui implementation (prevent the need to make a server round trip).