This dispatch() is completely ignored. Why?

[frederikhors]

I created a REPL for an issue with Svelte dispatch not being called:

Steps to reproduce

1. Open the REPL

2. Open the browser console

3. Go on the "About" page using the link

4. No message in console. I sould see the message: "handleInput"

Relevant code

<script>
    import Select from 'svelte-select';
    import { createEventDispatcher } from 'svelte';

    export let value = undefined;
    export let id = undefined;
    
    const dispatch = createEventDispatcher();
    
    let result;

    let items = [
        { value: 'one', label: 'One' },
        { value: 'two', label: 'Two' },
        { value: 'three', label: 'Three' },
    ];

    $: if (id !== undefined) {
        result = id;
    }

    $: if (result != undefined) {
        value = { value: 'custom', label: 'Custom' };
        console.log("this should dispatch!")
        dispatch('input', value);
        console.log("is it dispatched?")
    }
</script>

<Select {value} {items} on:change on:input />

The dispatch('input', value) is completely ignored.

Why?

[7nik]

See #4470: you dispatch the event before the parent has attached event listeners.