Event Handling

[MentalGear]

Thank you for this great library! It's much more idiomatic than svelte-simple-modal! However, there's no mention of event handling, and the standard svelte way doesn't seem to work.

Is your feature request related to a problem? Please describe. I try to dispatch an event from my modal component to the <Modals on:message={handleModalDialogButton}> tag in the overlying component.

Describe the solution you'd like Ideally, the normal svelte event dispatch would work out of the box.

Describe alternatives you've considered Using a store.

[mattjennings]

Unfortunately the only way to pass data up is through callback props. It is indirectly shown in the examples for the Managing your Modals section, but as also mentioned in #7, I should have a more clear page explaining this.

If svelte ever supports a way to forward all events up this would be an easy feature to add. But until that day comes (if it does), callback props are the only way for now.

[MentalGear]

Not even a store?

On 15 Aug 2022, at 16:10, Matt Jennings @.***> wrote:

 Unfortunately the only way to pass data up is through callback props. It is indirectly shown in the examples for the Managing your Modals section, but as also mentioned in #7, I should have a more clear page explaining this.

If svelte ever supports a way to forward all events up this would be an easy feature to add. But until that day comes (if it does), callback props are the only way for now.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[mattjennings]

Could you elaborate on what you mean?

[MentalGear]

Yeah, a pity with event forwarding. Gone is the ease and simplicity when trying to open multiple modals. :/ There's also a whole spec discussion going on in: https://github.com/sveltejs/rfcs/pull/60

I was wondering if it would be possible to forward an event (or global event object), if you were to simply on:message on all intermediary components of your Modals system.

A bit like the svelte example were an inner elements forwards an event with on:message to the topmost level. https://svelte.dev/tutorial/event-forwarding

[mattjennings]

Can you share your use case for wanting to handle events in <Modals />? IMO it doesn't make sense to have event handlers there, they should be on a per-modal basis. In which case #17 would be a good solution until there's a way to provide event handlers at the time of openModal.

[mattjennings]

I might have a solution here, should have a PR this week. It requires creating a custom event dispatcher, but it would allow you to handle events like so:

openModal(MyModal, props, {
   on: {
        message: (event) =>  { ... }
   }
})

The modal would have to dispatch the event using a custom dispatch method, but effectively works the same as normal event dispatching:

<script>
import { createModalEventDispatcher } from 'svelte-modals'

const dispatch = createModalEventDispatcher()

dispatch('message', { ... })
</script>

[mattjennings]

you can try it here https://svelte.dev/repl/40c3ee5b548f4c75bacf88b088259c66?version=3.49.0

[MentalGear]

This is great, thank you so much @mattjennings for this and your overall work on my favorite modal solution for svelte! (and sorry for the late reply!)