Svelte mui Select ignores on:change handler

Question

I have a basic example of Select control on which I try to attach an onChange handler:

<script type="ts">
    import Select, { Option } from '@smui/select';

    const onChange = () => {
        console.log('on change!');
    };

    let fruits = ['Apple', 'Orange', 'Banana', 'Mango'];

    let value = 'Orange';
</script>

    <div>
        <Select bind:value label="Select Menu" on:change={onChange}>
          {#each fruits as fruit}
            <Option value={fruit}>{fruit}</Option>
          {/each}
        </Select>
    
        <pre class="status">Selected: {value}</pre>
      </div>

However the event handler is ignored. I am using latest smui and svelte

Answer 1

Per component source code, the correct event is on:SMUISelect:change:

<script type="ts">
    import Select, { Option } from '@smui/select';

    const onChange = () => {
        console.log('on change!');
    };

    let fruits = ['Apple', 'Orange', 'Banana', 'Mango'];

    let value = 'Orange';
</script>

<div>
    <Select bind:value label="Select Menu" on:SMUISelect:change={onChange}>
        {#each fruits as fruit}
        <Option value={fruit}>{fruit}</Option>
        {/each}
    </Select>

    <pre class="status">Selected: {value}</pre>
</div>