Combobox: change styles and make list scrollable

JoBurgard · Jan 3, 2024 · 0b57374 · 0b57374
1 parent cacb84e
commit 0b57374
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/src/lib/ui/combobox/Combobox.svelte b/src/lib/ui/combobox/Combobox.svelte
@@ -62,6 +62,10 @@ SPDX-License-Identifier: Unlicense
  helpers: { isSelected },
  } = createCombobox<T>({
  forceVisible: true,
+ positioning: {
+ placement: 'bottom-start',
+ sameWidth: false,
+ },
  });
 
  selected.subscribe((newValue) => (value = newValue));
@@ -79,13 +83,14 @@ SPDX-License-Identifier: Unlicense
  : showAllResult;
 </script>
 
+<!-- TODO Ability to clear field -->
 <div class="isolate">
  <label class="relative block" use:melt={$label}>
  <input
  use:melt={$input}
  class={inputVariants({
  size,
- class: ['placeholder-transparent w-full', className],
+ class: ['placeholder-transparent w-full pr-7.5', className],
  })}
  on:blur
  on:change
@@ -107,19 +112,26 @@ SPDX-License-Identifier: Unlicense
  </label>
  {#if $open}
  <ul
- class="p-2 border rounded-[--roundedness-base] shadow-lg"
+ class="p-2 border min-h-0 max-h-[500px] rounded-[--roundedness-base] shadow-lg overflow-y-auto"
  use:melt={$menu}
  transition:fly={{ duration: 150, y: -5 }}
  >
- {#each filteredOptions || [] as resultIndex, index (index)}
- {@const optionData = toOption(data[resultIndex])}
- <li
- class="px-3 py-1.5 scroll-my-2 cursor-pointer rounded-[--roundedness-sm] hover:(bg-gray-100) data-[highlighted]:bg-gray-200"
- use:melt={$option(optionData)}
- >
- <div>{optionData.label}</div>
- </li>
- {/each}
+ <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+ <div class="flex min-h-0 flex-col gap-0 overflow-y-scroll" tabindex="0">
+ {#each filteredOptions || [] as resultIndex, index (index)}
+ {@const optionData = toOption(data[resultIndex])}
+ <li
+ class="px-3 py-1.5 scroll-my-2 cursor-pointer rounded-[--roundedness-sm] hover:(bg-gray-100) data-[highlighted]:bg-gray-200 select-none"
+ use:melt={$option(optionData)}
+ >
+ <div class="break-words">{optionData.label}</div>
+ </li>
+ {:else}
+ <li class="px-3 py-1.5 rounded-[--roundedness-sm] select-none">
+ No matching entry found.
+ </li>
+ {/each}
+ </div>
  </ul>
  {/if}
 </div>
diff --git a/src/lib/ui/input/index.ts b/src/lib/ui/input/index.ts
@@ -33,7 +33,7 @@ const inputVariants = tv({
 // [input[aria-expanded=true]_~_&] works
 const inputPlaceholderVariants = tv({
  base: `
- absolute top-1/2 -translate-y-1/2 text-gray-400
+ absolute top-1/2 -translate-y-1/2 text-gray-400 select-none
  transition-duration-100 transition-ease-out transition-property-[top,font-size,line-height]
  [input:not(:placeholder-shown)~&,input:focus~&,input[aria-expanded=true]_~_&]:(text-[--color-primary] bg-white px-1 -ml-1 rounded text-xs/3 top-0)
  `,

diff --git a/src/stories/ui/Combobox.stories.svelte b/src/stories/ui/Combobox.stories.svelte
@@ -28,6 +28,8 @@ SPDX-License-Identifier: Unlicense
  { label: 'Dull' },
  { label: 'Deafening' },
  { label: 'Destitute' },
+ { label: 'emptySpaces' },
+ { label: 'empty Spaces' },
  { label: 'Stingy' },
  { label: 'Spotless' },
  { label: 'Furious' },