Current Behavior When implementing an Autocomplete component insid

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Autocomplete 'on:selection' Event never triggers when inside of a Modal about skeleton HOT 4 CLOSED

libdev-hacker commented on June 7, 2024

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

from skeleton.

Comments (4)

libdev-hacker commented on June 7, 2024 1

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

from skeleton.

endigo9740 commented on June 7, 2024

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

from skeleton.

libdev-hacker commented on June 7, 2024

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}

from skeleton.

endigo9740 commented on June 7, 2024

@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: