Autocomplete 'on:selection' Event never triggers when inside of a Modal

[libdev-hacker]

Current Behavior

When implementing an Autocomplete component inside of a Modal, the selection event never gets fired, meaning that the inside value of the input never changes when selecting one of the options within the component

Expected Behavior

The selection event gets fired & the value within the input gets updated

Steps To Reproduce

1. Nest an Autocomplete component within a Modal
2. Like this <input class="input w-96 max-w-sm max-h-12 mb-2" bind:value={input} type="text" placeholder="Search..."/>
<Autocomplete bind:input={input} options={Autocomplete} on:selection={onSelection}/>
3. Try and select one of the options & see what happens

Link to Reproduction / Stackblitz

No response

More Information

No response

[endigo9740]

@libdev-hacker this is a fairly complex combination of features. A minimal reproduction would be welcome please.

[libdev-hacker]

Here is a video showing the issue (I apologise for the zip archive): autocomplete-in-modalzip.zip

Here is an example of how I'm trying to use these features:

<script lang='ts'>
  const modalStore: ModalStore = getModalStore();
  var autocomplete: AutocompleteOption<string>[] = [
      { label: "Test", value: "test" }
  ];

  let input: string = "";
  export let parent: SvelteComponent;
</script>
{#if $modalStore[0]}
    <div id="modal" class="bg-slate-800 grid grid-cols-1 grid-rows-2 grid-flow-col justify-items-center rounded-lg w-modal h-56 relative bottom-48">
        <div>
            <input class="input w-96 max-w-sm max-h-12 mb-2" bind:value={input} type="text" placeholder="Search..." />
            <div class="card w-full max-w-sm max-h-48 p-4 overflow-y-auto" tabindex="-1">
                <Autocomplete bind:input={input} options={autocomplete} on:selection={onSelection}/>
            </div>
        </div>
    </div>
{/if}

[endigo9740]

@libdev-hacker thanks for the snippet. Unfortunately it looks like onSelection() was not included in your code. This is a function you should be defining and handling, like:

function onSelection(event) {
    console.log(event.detail);
}

<Autocomplete ... on:selection={onSelection}/>

This is not well explained in the docs, but is present in the documentation for the main demo at the top of the page. Just tap the Code view, then you'll see this:

Alternatively, if you're not using the on:selection, just prune it from the component.

[libdev-hacker]

Hi,

Thanks for pointing that out to me, I'm sure you'd be happy to know that it now works.

Thanks for all your help & support