@txstate-mws/svelte-components 1.1.2 → 1.1.3

package/actions/resize.js

@@ -27,7 +27,7 @@ export function resize(el, config) {
         if (!equal(lastSize, current)) {
             lastSize = current;
             if (config?.store)
-                config.store.set(current);
+                config.store.update(v => ({ ...v, ...current }));
             el.dispatchEvent(new CustomEvent('resize', { detail: current }));
         }
     }
@@ -41,7 +41,7 @@ export function resize(el, config) {
             if (newConfig?.debounce === true)
                 newConfig.debounce = 100;
             if (newConfig?.store !== config?.store) {
-                newConfig?.store?.set(lastSize);
+                newConfig?.store?.update(v => ({ ...v, ...lastSize }));
             }
             if (!!newConfig?.debounce !== !!config?.debounce) {
                 observer.disconnect();

package/components/MultiSelect.svelte

@@ -1,5 +1,5 @@
 <script >import { createEventDispatcher } from 'svelte';
-import { randomid } from 'txstate-utils';
+import { randomid, sleep } from 'txstate-utils';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 import DefaultPopupMenu from './PopupMenu.svelte';
 import { debouncedPromise, modifierKey, selectionIsLeft } from '../util';
@@ -29,6 +29,8 @@ async function reactToInput(..._) {
     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;
 }
@@ -78,7 +80,7 @@ function inputkeydown(e) {
     }
 }
 function inputfocus() {
-    reactToInput();
+    reactToInput(true);
 }
 let popuphilited;
 $: if (popuphilited != null)
@@ -99,7 +101,7 @@ $: dispatch('change', selected);
 </script>
 
 <fieldset>
-  <ul class="multiselect-selected" role="listbox" on:click={() => inputelement.focus()}>
+  <ul class="multiselect-selected" role="listbox">
     {#each selected as option, i}
       <li id={id + option.value} role="option" tabindex="-1" class="multiselect-pill" class:hilited={hilitedpill === option.value}
         on:click|preventDefault|stopPropagation={() => removeSelection(option, i, 1)}

package/components/PopupMenu.svelte

@@ -53,7 +53,8 @@ async function reactToMenuShown(_) {
     else {
         buttonelement.setAttribute('aria-controls', menuid);
         buttonelement.setAttribute('aria-expanded', 'true');
-        buttonelement.focus();
+        if (buttonelement !== document.activeElement)
+            buttonelement.focus();
     }
 }
 $: reactToMenuShown(menushown);
@@ -149,7 +150,8 @@ function onbuttonclick(e) {
 async function onblur(e) {
     // tabindex=-1 on our menu elements means e.relatedTarget will be set
     if (!(e.relatedTarget instanceof HTMLElement && menuelement?.contains(e.relatedTarget))) {
-        blurTimer = requestAnimationFrame(() => { menushown = false; });
+        blurTimer = requestAnimationFrame(() => { if (buttonelement !== document.activeElement)
+            menushown = false; });
     }
 }
 function cleanup(element) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Svelte components that are generically useful.",
   "dependencies": {
     "@txstate-mws/svelte-store": "^1.0.3",