@txstate-mws/svelte-components 1.3.3 → 1.3.5

package/components/FocusLock.svelte

@@ -88,8 +88,8 @@ const focusin = (e) => {
             setInitialFocus();
     }
 };
-const windowclick = (_) => {
-    if (state === 'active') {
+const windowclick = (e) => {
+    if (state === 'active' && e.target instanceof HTMLElement && e.target.isConnected) {
         returnfocusto = undefined;
         dispatch('escape');
     }

package/components/MultiSelect.svelte

@@ -1,8 +1,8 @@
 <script>import { createEventDispatcher } from 'svelte';
-import { randomid, sleep } from 'txstate-utils';
+import { randomid, Cache } from 'txstate-utils';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 import DefaultPopupMenu from './PopupMenu.svelte';
-import { debouncedPromise, modifierKey, selectionIsLeft } from '../util';
+import { modifierKey, selectionIsLeft } from '../util';
 export let id = randomid();
 export let name;
 export let disabled = false;
@@ -16,6 +16,7 @@ export let placeholder = '';
 export let emptyText = undefined;
 export let PopupMenu = DefaultPopupMenu;
 let menushown;
+let loading = false;
 let options = [];
 let hilitedpill;
 let inputvalue = '';
@@ -23,20 +24,26 @@ let popupvalue = undefined;
 let inputelement;
 const descriptionid = randomid();
 const dispatch = createEventDispatcher();
-$: debouncedGetOptions = debouncedPromise(getOptions, 100, []);
+const optionsCache = new Cache(async (ipt) => {
+    return await getOptions(ipt);
+}, { freshseconds: 5 });
 $: selectedSet = new Set(selected.map(s => s.value));
+let optionsTimer;
 async function reactToInput(..._) {
-    const saveval = inputvalue;
-    const rawOptions = await debouncedGetOptions(saveval);
-    if (inputvalue !== saveval)
-        return; // ignore any results that are out of date
-    options = rawOptions.filter(o => !selectedSet.has(o.value));
-    await sleep(100);
-    // needed to sleep a little bit or this will turn the menu on only to have popupmenu's click handler toggle it back off
-    if (typeof document !== 'undefined' && inputelement === document.activeElement)
-        menushown = true;
+    loading = true;
+    clearTimeout(optionsTimer);
+    setTimeout(async () => {
+        const saveval = inputvalue;
+        const rawOptions = await optionsCache.get(saveval);
+        if (inputvalue !== saveval)
+            return; // ignore any results that are out of date
+        options = rawOptions.filter(o => !selectedSet.has(o.value));
+        if (typeof document !== 'undefined' && inputelement === document.activeElement && (options.length || inputvalue?.length))
+            menushown = true;
+        loading = false;
+    }, 250);
 }
-$: reactToInput(inputvalue, debouncedGetOptions, selectedSet);
+$: reactToInput(inputvalue, getOptions, selectedSet);
 $: availablemessage = options.filter(o => o.value).length + ' autocomplete choices available';
 function addSelection(e) {
     inputvalue = '';
@@ -83,8 +90,8 @@ function inputkeydown(e) {
         }
     }
 }
-function inputfocus() {
-    reactToInput(true);
+async function inputfocus() {
+    reactToInput();
 }
 let popuphilited;
 $: if (popuphilited != null)
@@ -127,7 +134,7 @@ $: reactToHilite(hilitedpill, id);
   </ScreenReaderOnly>
   <slot></slot>
 </fieldset>
-<svelte:component this={PopupMenu} bind:menushown bind:hilited={popuphilited} bind:value={popupvalue} align='bottomleft' {emptyText} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={options} buttonelement={inputelement} on:change={addSelection}></svelte:component>
+<svelte:component this={PopupMenu} bind:menushown bind:hilited={popuphilited} bind:value={popupvalue} align='bottomleft' {loading} {emptyText} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={options} buttonelement={inputelement} on:change={addSelection}></svelte:component>
 
 <style>
   fieldset {

package/components/PopupMenu.svelte

@@ -18,6 +18,7 @@ export let cover = false;
 export let showSelected = true;
 export let width = undefined;
 export let computedalign = new Store({ valign: 'bottom', halign: 'left' });
+export let loading = false;
 export let usePortal = undefined;
 export let emptyText = undefined;
 export let value = undefined;
@@ -145,7 +146,8 @@ let blurTimer;
 function onbuttonclick(e) {
     e.preventDefault();
     cancelAnimationFrame(blurTimer);
-    menushown = !menushown;
+    if (!loading)
+        menushown = !menushown;
 }
 async function onblur(e) {
     // tabindex=-1 on our menu elements means e.relatedTarget will be set

package/components/PopupMenu.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         showSelected?: boolean;
         width?: string | undefined;
         computedalign?: Store<GlueAlignStore>;
+        loading?: boolean;
         usePortal?: HTMLElement | true | undefined;
         emptyText?: string | undefined;
         value?: string | undefined;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "Svelte components that are generically useful.",
   "dependencies": {
     "@txstate-mws/svelte-store": "^1.0.3",
     "tabbable": "^6.0.0",
-    "txstate-utils": "^1.7.6"
+    "txstate-utils": "^1.7.12"
   },
   "devDependencies": {
     "@playwright/test": "^1.18.1",

package/util/util.d.ts

@@ -1,5 +1,4 @@
 export declare function classes(...classNames: (string | undefined)[]): string;
 export declare function debounced(fn: Function, timeout: number): (...args: any[]) => void;
-export declare function debouncedPromise<T>(fn: (..._: any) => Promise<T> | T, timeout: number, defaultValue: T): (..._: any) => Promise<T>;
 export declare function modifierKey(e: any): any;
 export declare function selectionIsLeft(ele: HTMLInputElement | HTMLTextAreaElement): boolean;

package/util/util.js

@@ -8,23 +8,6 @@ export function debounced(fn, timeout) {
         timer = setTimeout(() => fn(...args), timeout);
     };
 }
-export function debouncedPromise(fn, timeout, defaultValue) {
-    let version = 0;
-    return async (...args) => {
-        const myversion = ++version;
-        return await new Promise(resolve => {
-            setTimeout(() => {
-                if (version === myversion) {
-                    version = 0;
-                    resolve(fn(...args));
-                }
-                else {
-                    resolve(defaultValue);
-                }
-            }, timeout);
-        });
-    };
-}
 export function modifierKey(e) {
     return e.ctrlKey || e.altKey || e.metaKey || e.key === 'Insert';
 }