svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

combobox: don't use portal for picker

Browse Source 
fixes z-stacking issues when used within dialogs
This commit is contained in:
Elijah Duffy
2026-03-13 16:27:35 -07:00
parent bcfd3ea740
commit 50c052a3c3
1 changed files with 45 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/lib/Combobox.svelte
View File

@@ -41,8 +41,7 @@
import Label from './Label.svelte'; import Label from './Label.svelte';
import StyledRawInput from './StyledRawInput.svelte'; import StyledRawInput from './StyledRawInput.svelte';
import { InputValidatorEvent, validate, type ValidatorOptions } from '@svelte-toolkit/validate'; import { InputValidatorEvent, validate, type ValidatorOptions } from '@svelte-toolkit/validate';
import { onMount, tick, untrack, type Snippet } from 'svelte'; import { untrack, type Snippet } from 'svelte';
import { Portal } from '@jsrob/svelte-portal';
import { scale } from 'svelte/transition'; import { scale } from 'svelte/transition';
import { generateIdentifier, type IconDef } from './util'; import { generateIdentifier, type IconDef } from './util';
import type { ClassValue, MouseEventHandler } from 'svelte/elements'; import type { ClassValue, MouseEventHandler } from 'svelte/elements';
@@ -502,54 +501,52 @@
<svelte:window onclick={handleWindowClick} /> <svelte:window onclick={handleWindowClick} />
<!-- Combobox picker --> <!-- Combobox picker -->
<Portal target="body"> {#if open}
{#if open} <!-- Picker container -->
<!-- Picker container --> <div
<div class={[
class={[ 'picker absolute top-0 left-0 z-50 overflow-y-auto px-2 py-3',
'picker absolute top-0 left-0 z-50 overflow-y-auto px-2 py-3', 'rounded-sm border shadow-lg shadow-black/25 outline-hidden',
'rounded-sm border shadow-lg shadow-black/25 outline-hidden', 'border-sui-accent dark:border-sui-accent/50 dark:bg-sui-text-800 bg-white dark:sm:bg-slate-800',
'border-sui-accent dark:border-sui-accent/50 dark:bg-sui-text-800 bg-white dark:sm:bg-slate-800', 'text-sui-text dark:text-sui-background',
'text-sui-text dark:text-sui-background', open && pickerPosition === 'top' && 'mb-[var(--outer-gap)]',
open && pickerPosition === 'top' && 'mb-[var(--outer-gap)]', open && pickerPosition === 'bottom' && 'mt-[var(--outer-gap)]'
open && pickerPosition === 'bottom' && 'mt-[var(--outer-gap)]' ]}
]} bind:this={pickerContainer}
bind:this={pickerContainer} transition:scale={{ duration: 200 }}
transition:scale={{ duration: 200 }} role="listbox"
role="listbox" onkeydown={(e) => {
onkeydown={(e) => { if (e.key === 'Escape') {
if (e.key === 'Escape') { popover.setOpen(false);
popover.setOpen(false); searchInput?.focus();
searchInput?.focus(); }
} }}
}} onscroll={(e) => {
onscroll={(e) => { if (!onscroll) return;
if (!onscroll) return; const target = e.target as HTMLDivElement;
const target = e.target as HTMLDivElement; if (!target) return;
if (!target) return;
const margin = 10; // 10px margin for top & bottom const margin = 10; // 10px margin for top & bottom
const atTop = target.scrollTop < margin; const atTop = target.scrollTop < margin;
const atBottom = target.scrollTop + target.clientHeight > target.scrollHeight - margin; const atBottom = target.scrollTop + target.clientHeight > target.scrollHeight - margin;
onscroll({ event: e, top: atTop, bottom: atBottom, searchInput: searchInput?.value ?? '' }); onscroll({ event: e, top: atTop, bottom: atBottom, searchInput: searchInput?.value ?? '' });
}} }}
tabindex="0" tabindex="0"
{@attach minWidth({ options, mode: pickerWidth, matchElem: searchInput })} {@attach minWidth({ options, mode: pickerWidth, matchElem: searchInput })}
{...popover.floating()} {...popover.floating()}
> >
{#each filteredItems as opt (opt.value)} {#each filteredItems as opt (opt.value)}
{@render option(opt)} {@render option(opt)}
{:else}
<!-- Display loading state or not found if no options available -->
{#if loading}
{@render option(loadingOption, true)}
{:else} {:else}
<!-- Display loading state or not found if no options available --> {@render option(notFoundOption, true)}
{#if loading} {/if}
{@render option(loadingOption, true)} {/each}
{:else} </div>
{@render option(notFoundOption, true)} {/if}
{/if}
{/each}
</div>
{/if}
</Portal>
<!-- Combobox main input container --> <!-- Combobox main input container -->
<div class={classValue}> <div class={classValue}>