immediately hide tooltip on scroll + icon fixes in MultiSelect + type fixes in CmdPalette and PrevNext

janosh · janosh · commit ad02b140032f · 2025-10-04T16:15:33.000-07:00
- unit tests for tooltip to verify new scroll behavior
- remove RadioButtons component and related tests
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -43,7 +43,7 @@ repos:
         exclude: changelog\.md
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.36.0
+    rev: v9.37.0
     hooks:
       - id: eslint
         types: [file]
diff --git a/package.json b/package.json
@@ -13,30 +13,30 @@
     "svelte": "^5.35.6"
   },
   "devDependencies": {
-    "@playwright/test": "^1.55.0",
+    "@playwright/test": "^1.55.1",
     "@stylistic/eslint-plugin": "^5.4.0",
-    "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.42.2",
-    "@sveltejs/package": "2.5.3",
-    "@sveltejs/vite-plugin-svelte": "^6.2.0",
-    "@types/node": "^24.5.2",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.43.8",
+    "@sveltejs/package": "2.5.4",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@types/node": "^24.6.2",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.36.0",
-    "eslint-plugin-svelte": "^3.12.3",
-    "happy-dom": "^18.0.1",
+    "eslint": "^9.37.0",
+    "eslint-plugin-svelte": "^3.12.4",
+    "happy-dom": "^19.0.2",
     "hastscript": "^9.0.1",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^5.39.3",
-    "svelte-check": "^4.3.1",
+    "svelte": "^5.39.8",
+    "svelte-check": "^4.3.2",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.2",
-    "svelte2tsx": "^0.7.43",
-    "typescript": "5.9.2",
-    "typescript-eslint": "^8.44.0",
-    "vite": "^7.1.6",
+    "svelte2tsx": "^0.7.44",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.9",
     "vitest": "^3.2.4"
   },
   "keywords": [
diff --git a/src/lib/CmdPalette.svelte b/src/lib/CmdPalette.svelte
@@ -9,7 +9,8 @@
     action: (label: string) => void
   }
 
-  interface Props extends Omit<ComponentProps<typeof MultiSelect>, `options`> {
+  interface Props
+    extends Omit<ComponentProps<typeof MultiSelect<Action>>, `options`> {
     actions: Action[]
     triggers?: string[]
     close_keys?: string[]
@@ -46,14 +47,16 @@
   }
 
   function close_if_outside(event: MouseEvent) {
-    const target = event.target as HTMLElement
+    const target = event.target
+    if (!target || !(target instanceof HTMLElement)) return
     if (open && !dialog?.contains(target) && !target.closest(`ul.options`)) {
       open = false
     }
   }
 
-  function trigger_action_and_close(data: { option: Option }) {
-    const { action, label } = data.option as Action
+  function trigger_action_and_close({ option }: { option: Option }) {
+    const { action, label } = (option ?? {}) as Action
+    if (!action) return
     action(label)
     open = false
   }
diff --git a/src/lib/MultiSelect.svelte b/src/lib/MultiSelect.svelte
@@ -437,7 +437,8 @@
       event.stopPropagation()
       // Only remove option if it wouldn't violate minSelect
       if (minSelect === null || selected.length > minSelect) {
-        remove(selected.at(-1) as Option, event)
+        const last_option = selected.at(-1)
+        if (last_option) remove(last_option, event)
       }
       // Don't prevent default, allow normal backspace behavior if not removing
     } // make first matching option active on any keypress (if none of the above special cases match)
@@ -597,7 +598,7 @@
       window.addEventListener(`scroll`, update_position, true)
       window.addEventListener(`resize`, update_position)
 
-      $effect.pre(() => {
+      $effect(() => {
         if (open && target_node) update_position()
         else node.hidden = true
       })
@@ -669,8 +670,7 @@
   {:else}
     <Icon
       icon="ChevronExpand"
-      width="15px"
-      style="min-width: 1em; padding: 0 1pt; cursor: pointer"
+      style="width: 15px; min-width: 1em; padding: 0 1pt; cursor: pointer"
     />
   {/if}
   <ul
@@ -725,7 +725,7 @@
             {#if removeIcon}
               {@render removeIcon()}
             {:else}
-              <Icon icon="Cross" width="15px" />
+              <Icon icon="Cross" style="width: 15px" />
             {/if}
           </button>
         {/if}
@@ -741,7 +741,7 @@
       {autocomplete}
       {inputmode}
       {pattern}
-      placeholder={selected.length == 0 ? placeholder : null}
+      placeholder={selected.length === 0 ? placeholder : null}
       aria-invalid={invalid ? `true` : null}
       ondrop={() => false}
       onmouseup={open_dropdown}
@@ -782,8 +782,7 @@
     {:else}
       <Icon
         icon="Disabled"
-        width="14pt"
-        style="margin: 0 2pt"
+        style="width: 14pt; margin: 0 2pt"
         data-name="disabled-icon"
         aria-disabled="true"
       />
@@ -807,7 +806,7 @@
         {#if removeIcon}
           {@render removeIcon()}
         {:else}
-          <Icon icon="Cross" width="15px" />
+          <Icon icon="Cross" style="width: 15px" />
         {/if}
       </button>
     {/if}
@@ -917,7 +916,7 @@
         {@const text_input_is_duplicate = selected.map(get_label).includes(searchText)}
         {@const is_dupe = !duplicates && text_input_is_duplicate && `dupe`}
         {@const can_create = Boolean(allowUserOptions && createOptionMsg) && `create`}
-        {@const no_match = Boolean(matchingOptions?.length == 0 && noMatchingOptionsMsg) &&
+        {@const no_match = Boolean(matchingOptions?.length === 0 && noMatchingOptionsMsg) &&
         `no-match`}
         {@const msgType = is_dupe || can_create || no_match}
         {#if msgType}
diff --git a/src/lib/PrevNext.svelte b/src/lib/PrevNext.svelte
@@ -2,17 +2,18 @@
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  export type Item = string | [string, unknown]
-  type T = $$Generic<Item>
+  export type Item = [string, unknown]
 
   interface Props extends Omit<HTMLAttributes<HTMLElement>, `children` | `onkeyup`> {
-    items?: T[]
+    items?: (string | Item)[]
     node?: string
     current?: string
     log?: `verbose` | `errors` | `silent`
     nav_options?: { replace_state: boolean; no_scroll: boolean }
     titles?: { prev: string; next: string }
-    onkeyup?: ((obj: { prev: Item; next: Item }) => Record<string, string>) | null
+    onkeyup?:
+      | ((obj: { prev: Item; next: Item }) => Record<string, string | undefined>)
+      | null
     prev_snippet?: Snippet<[{ item: Item }]>
     children?: Snippet<[{ kind: `prev` | `next`; item: Item }]>
     between?: Snippet<[]>
@@ -26,10 +27,7 @@
     log = `errors`,
     nav_options = { replace_state: true, no_scroll: true },
     titles = { prev: `&larr; Previous`, next: `Next &rarr;` },
-    onkeyup = ({ prev, next }) => ({
-      ArrowLeft: prev[0],
-      ArrowRight: next[0],
-    }),
+    onkeyup = ({ prev, next }) => ({ ArrowLeft: prev[0], ArrowRight: next[0] }),
     prev_snippet,
     children,
     between,
@@ -40,9 +38,9 @@
 
   // Convert items to consistent [key, value] format
   let items_arr = $derived(
-    (items ?? []).map((
-      itm,
-    ) => (typeof itm === `string` ? [itm, itm] : itm)) as Item[],
+    (items ?? []).map(
+      (itm) => (typeof itm === `string` ? [itm, itm] : itm),
+    ) as Item[],
   )
 
   // Calculate prev/next items with wraparound
@@ -71,9 +69,10 @@
   function handle_keyup(event: KeyboardEvent) {
     if (!onkeyup) return
     if ((items_arr?.length ?? 0) < min_items) return
+    if (!prev || !next) return
     const key_map = onkeyup({ prev, next })
     const to = key_map[event.key]
-    if (to) {
+    if (to !== undefined) {
       const { replace_state, no_scroll } = nav_options
       const [scroll_x, scroll_y] = no_scroll
         ? [window.scrollX, window.scrollY]
diff --git a/src/lib/RadioButtons.svelte b/src/lib/RadioButtons.svelte
diff --git a/src/lib/attachments.ts b/src/lib/attachments.ts
@@ -531,8 +531,12 @@ export const tooltip = (options: TooltipOptions = {}): Attachment => (node: Elem
 
     events.forEach((event, idx) => element.addEventListener(event, handlers[idx]))
 
+    // Hide tooltip when user scrolls
+    globalThis.addEventListener(`scroll`, hide_tooltip, true)
+
     return () => {
       events.forEach((event, idx) => element.removeEventListener(event, handlers[idx]))
+      globalThis.removeEventListener(`scroll`, hide_tooltip, true)
 
       const original_title = element.getAttribute(`data-original-title`)
       if (original_title) {
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -8,7 +8,6 @@ export { default as GitHubCorner } from './GitHubCorner.svelte'
 export { default as Icon } from './Icon.svelte'
 export { default, default as MultiSelect } from './MultiSelect.svelte'
 export { default as PrevNext } from './PrevNext.svelte'
-export { default as RadioButtons } from './RadioButtons.svelte'
 export { default as Toggle } from './Toggle.svelte'
 export * from './types'
 export * from './utils'
diff --git a/tests/vitest/RadioButtons.test.ts b/tests/vitest/RadioButtons.test.ts
diff --git a/tests/vitest/attachments.test.ts b/tests/vitest/attachments.test.ts

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,8 @@`
`9`	`9`	`action: (label: string) => void`
`10`	`10`	`}`
`11`	`11`
`12`		- interface Props extends Omit<ComponentProps<typeof MultiSelect>, `options`> {
	`12`	`+ interface Props`
	`13`	+ extends Omit<ComponentProps<typeof MultiSelect<Action>>, `options`> {
`13`	`14`	`actions: Action[]`
`14`	`15`	`triggers?: string[]`
`15`	`16`	`close_keys?: string[]`
`@@ -46,14 +47,16 @@`
`46`	`47`	`}`
`47`	`48`
`48`	`49`	`function close_if_outside(event: MouseEvent) {`
`49`		`- const target = event.target as HTMLElement`
	`50`	`+ const target = event.target`
	`51`	`+ if (!target \|\| !(target instanceof HTMLElement)) return`
`50`	`52`	if (open && !dialog?.contains(target) && !target.closest(`ul.options`)) {
`51`	`53`	`open = false`
`52`	`54`	`}`
`53`	`55`	`}`
`54`	`56`
`55`		`- function trigger_action_and_close(data: { option: Option }) {`
`56`		`- const { action, label } = data.option as Action`
	`57`	`+ function trigger_action_and_close({ option }: { option: Option }) {`
	`58`	`+ const { action, label } = (option ?? {}) as Action`
	`59`	`+ if (!action) return`
`57`	`60`	`action(label)`
`58`	`61`	`open = false`
`59`	`62`	`}`