@dosgato/dialog 0.0.41 → 0.0.42

package/FieldAutocomplete.svelte

@@ -1,7 +1,7 @@
 <script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
 import FieldStandard from './FieldStandard.svelte';
-import { randomid } from 'txstate-utils';
-import { PopupMenu, ScreenReaderOnly } from '@txstate-mws/svelte-components';
+import { isBlank, isNotBlank, randomid } from 'txstate-utils';
+import { modifierKey, PopupMenu, ScreenReaderOnly } from '@txstate-mws/svelte-components';
 import { getDescribedBy } from './';
 import { onMount } from 'svelte';
 export let id = undefined;
@@ -13,47 +13,63 @@ export { className as class };
 export let notNull = false;
 export let disabled = false;
 export let choices;
-export let defaultValue = notNull ? choices[0].value : undefined;
+export let defaultValue = undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
 export let helptext = undefined;
 let inputvalue = '';
 let popupvalue = undefined;
-let savedLabel = '';
-let changed = false;
 let menuid;
 const liveTextId = randomid();
-$: filteredChoices = changed
-    ? choices.filter((item) => {
-        return item.label?.toLowerCase().includes(inputvalue.toLowerCase()) || item.value.toLowerCase().includes(inputvalue.toLowerCase());
-    })
-    : choices;
+$: finalserialize = !notNull ? nullableSerialize : v => v;
+$: finaldeserialize = !notNull ? nullableDeserialize : v => v;
+$: valueToLabel = Object.fromEntries(choices.map(c => [c.value, c.label || c.value]));
+$: labelToValue = Object.fromEntries(choices.map(c => [c.label || c.value, c.value]));
+$: filteredChoices = choices.filter((item) => {
+    return item.label?.toLowerCase().includes(inputvalue.toLowerCase()) || item.value.toLowerCase().includes(inputvalue.toLowerCase());
+});
+let menushown = false;
+let savedVal = defaultValue;
+function onKeyUp(setVal) {
+    return (e) => {
+        if (!modifierKey(e)) {
+            const val = labelToValue[inputvalue.trim()];
+            menushown = !val;
+            // we need to make sure the form state stays up to date with what's shown in the text field
+            // if the text field has only a substring of a valid label the form state value should remain
+            // empty, but once the text field has a valid label the form state should be updated
+            if (savedVal !== val) {
+                savedVal = val;
+                setVal(val);
+            }
+        }
+    };
+}
 function onchangepopup(setVal) {
     return (e) => {
         inputvalue = e.detail.label || e.detail.value;
-        savedLabel = inputvalue;
         popupvalue = undefined;
+        savedVal = e.detail.value;
         setVal(e.detail.value);
-        changed = false;
     };
 }
-async function checkifchanged(e) {
-    await setTimeout(function () {
-        if (inputelement.value !== savedLabel)
-            changed = true;
-    }, 1);
-}
-const valueToLabel = {};
-for (const choice of choices)
-    valueToLabel[choice.value] = choice.label || choice.value;
-let set = false;
-function reactToInitialValue(value) {
-    if (!value || set)
-        return;
-    inputvalue = valueToLabel[value];
-    savedLabel = inputvalue;
-    set = true;
+function reactToValue(value, setVal) {
+    const dsvalue = finaldeserialize(value);
+    if (dsvalue !== savedVal) {
+        const label = valueToLabel[dsvalue];
+        // if the form state value changes from the outside we need to replace the text field content
+        // with the new label
+        // if the new form state value is undefined, we should let them keep any half-finished typing they
+        // might have in the field, but if they have a fully valid entry in the field, it needs to disappear
+        // to reflect the new reality that the form value has gone away
+        if (label != null || (savedVal && valueToLabel[savedVal]))
+            inputvalue = label ?? '';
+        savedVal = dsvalue;
+        // if the form state value changes from the outside to an invalid value, we have to clear it out
+        if (isNotBlank(dsvalue) && isBlank(label))
+            setVal(finaldeserialize(''));
+    }
 }
 let portal;
 onMount(() => {
@@ -61,10 +77,10 @@ onMount(() => {
 });
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:setVal let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  {@const _ = reactToInitialValue(value)}
-  <input bind:this={inputelement} bind:value={inputvalue} {id} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} aria-expanded={false} aria-controls={menuid} on:blur={onBlur} on:change={onChange} autocapitalize="none" type="text" autocomplete="off" aria-autocomplete="list" role="combobox" {disabled} aria-describedby={getDescribedBy([messagesid, helptextid])} on:keydown={checkifchanged}>
-  <PopupMenu bind:menuid align="bottomleft" usePortal={portal} items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={finalserialize} deserialize={finaldeserialize} let:value let:setVal let:valid let:invalid let:id let:onBlur let:messagesid let:helptextid>
+  {@const _ = reactToValue(value, setVal)}
+  <input bind:this={inputelement} bind:value={inputvalue} {id} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} aria-expanded={false} aria-controls={menuid} on:blur={onBlur} on:keyup={onKeyUp(setVal)} autocapitalize="none" type="text" autocomplete="off" aria-autocomplete="list" role="combobox" {disabled} aria-describedby={getDescribedBy([messagesid, helptextid])}>
+  <PopupMenu bind:menushown bind:menuid align="bottomleft" usePortal={portal} items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
   <ScreenReaderOnly arialive="polite" ariaatomic={true} id={liveTextId}>
     {filteredChoices.length} {filteredChoices.length === 1 ? 'option' : 'options'} available.
   </ScreenReaderOnly>

package/FieldAutocomplete.svelte.d.ts

@@ -13,7 +13,7 @@ declare const __propDef: {
             value: string;
             disabled?: boolean | undefined;
         }[];
-        defaultValue?: any;
+        defaultValue?: string | undefined;
         conditional?: boolean | undefined;
         required?: boolean | undefined;
         inputelement?: HTMLInputElement | undefined;

package/FieldMultiselect.svelte

@@ -11,6 +11,7 @@ export let disabled = false;
 export let defaultValue = [];
 export let conditional = undefined;
 export let required = false;
+export let maxSelections = 0;
 export let getOptions;
 // each time we run getOptions we will save the value -> label mappings
 // that it finds, so that we can display labels on pills
@@ -54,7 +55,7 @@ async function reactToValue(value) {
   <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} let:value let:valid let:invalid let:id let:onBlur let:setVal>
     {@const _ = reactToValue(value)}
     <div class:valid class:invalid>
-      <MultiSelect {id} name={path} usePortal={portal} {disabled} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions} on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}></MultiSelect>
+      <MultiSelect {id} name={path} usePortal={portal} {disabled} {maxSelections} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions} on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}></MultiSelect>
     </div>
   </FieldStandard>
 {/if}

package/FieldMultiselect.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         defaultValue?: string[] | undefined;
         conditional?: boolean | undefined;
         required?: boolean | undefined;
+        maxSelections?: number | undefined;
         getOptions: (search: string) => Promise<PopupMenuItem[]>;
     };
     events: {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "dependencies": {
-    "@txstate-mws/svelte-components": "^1.3.8",
+    "@txstate-mws/svelte-components": "^1.3.9",
     "@txstate-mws/svelte-forms": "^1.3.4",
     "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",