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 StyledRawInput from './StyledRawInput.svelte';
import { InputValidatorEvent, validate, type ValidatorOptions } from '@svelte-toolkit/validate';
import { onMount, tick, untrack, type Snippet } from 'svelte';
import { Portal } from '@jsrob/svelte-portal';
import { untrack, type Snippet } from 'svelte';
import { scale } from 'svelte/transition';
import { generateIdentifier, type IconDef } from './util';
import type { ClassValue, MouseEventHandler } from 'svelte/elements';
@@ -502,54 +501,52 @@
<svelte:window onclick={handleWindowClick} />
<!-- Combobox picker -->
<Portal target="body">
{#if open}
<!-- Picker container -->
<div
class={[
'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',
'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',
open && pickerPosition === 'top' && 'mb-[var(--outer-gap)]',
open && pickerPosition === 'bottom' && 'mt-[var(--outer-gap)]'
]}
bind:this={pickerContainer}
transition:scale={{ duration: 200 }}
role="listbox"
onkeydown={(e) => {
if (e.key === 'Escape') {
popover.setOpen(false);
searchInput?.focus();
}
}}
onscroll={(e) => {
if (!onscroll) return;
const target = e.target as HTMLDivElement;
if (!target) return;
{#if open}
<!-- Picker container -->
<div
class={[
'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',
'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',
open && pickerPosition === 'top' && 'mb-[var(--outer-gap)]',
open && pickerPosition === 'bottom' && 'mt-[var(--outer-gap)]'
]}
bind:this={pickerContainer}
transition:scale={{ duration: 200 }}
role="listbox"
onkeydown={(e) => {
if (e.key === 'Escape') {
popover.setOpen(false);
searchInput?.focus();
}
}}
onscroll={(e) => {
if (!onscroll) return;
const target = e.target as HTMLDivElement;
if (!target) return;
const margin = 10; // 10px margin for top & bottom
const atTop = target.scrollTop < margin;
const atBottom = target.scrollTop + target.clientHeight > target.scrollHeight - margin;
onscroll({ event: e, top: atTop, bottom: atBottom, searchInput: searchInput?.value ?? '' });
}}
tabindex="0"
{@attach minWidth({ options, mode: pickerWidth, matchElem: searchInput })}
{...popover.floating()}
>
{#each filteredItems as opt (opt.value)}
{@render option(opt)}
const margin = 10; // 10px margin for top & bottom
const atTop = target.scrollTop < margin;
const atBottom = target.scrollTop + target.clientHeight > target.scrollHeight - margin;
onscroll({ event: e, top: atTop, bottom: atBottom, searchInput: searchInput?.value ?? '' });
}}
tabindex="0"
{@attach minWidth({ options, mode: pickerWidth, matchElem: searchInput })}
{...popover.floating()}
>
{#each filteredItems as opt (opt.value)}
{@render option(opt)}
{:else}
<!-- Display loading state or not found if no options available -->
{#if loading}
{@render option(loadingOption, true)}
{:else}
<!-- Display loading state or not found if no options available -->
{#if loading}
{@render option(loadingOption, true)}
{:else}
{@render option(notFoundOption, true)}
{/if}
{/each}
</div>
{/if}
</Portal>
{@render option(notFoundOption, true)}
{/if}
{/each}
</div>
{/if}
<!-- Combobox main input container -->
<div class={classValue}>