@seed-ship/mcp-ui-solid 4.2.2 → 4.3.0

package/CHANGELOG.md

@@ -5,6 +5,42 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.3.0] - 2026-04-11
+
+### Added — Prefill Enhancements (Phase B)
+
+#### `prefillMode: "resolve"` for autocomplete fields (Proposal 1)
+- Autocomplete fields can receive display names (e.g. "Paris") instead of codes
+- MCP-UI calls `apiUrl` to resolve to `valueField` (e.g. code "75056") client-side
+- Reduces server-side complexity — no async value resolution needed before emitting forms
+- Fallback: raw prefill value used if API call fails
+
+#### Smart tag display (Proposal 2)
+- Select/multi-select fields show `label` not `value` for prefilled codes
+- Autocomplete shows `displayHint` or resolved label as chip text instead of raw code
+
+#### Prefill confidence summary (Proposal 3)
+- Shows "N champ(s) pré-rempli(s) sur M" when at least one field is prefilled
+- Displayed in both FormRenderer and EmbeddedFormSection (scratchpad forms)
+
+#### Auto-submit toast mode (Proposal 4)
+- When ALL fields are prefilled + `autoSubmitDelay` set, shows compact toast instead of full form
+- Toast shows prefilled values summary with countdown, "Modifier" to expand, × to cancel
+- Any interaction cancels countdown and expands full form
+
+#### `valueFormat` validation (Proposal 5)
+- Optional regex pattern on form fields — validates submitted value format
+- `valueFormatHint` for human-readable error message on failure
+- Runs after type-specific validation, supports arrays (multi-select)
+
+#### Autocomplete always submits `valueField` (Proposal 6)
+- On blur without selection, auto-resolves typed text to first API result
+- Ensures form never submits display names when `valueField` is configured
+- Fixes silent data corruption when users type instead of selecting
+
+### Changed
+- `@seed-ship/mcp-ui-spec` bumped to 3.2.0 (`prefillMode`, `valueFormat`, `valueFormatHint`)
+
 ## [4.2.2] - 2026-04-11
 
 ### Added — Prefilled Forms with Source Indicators

package/README.md

@@ -5,13 +5,15 @@ SolidJS components + chat toolkit for MCP-generated UI. Part of the [MCP UI ecos
 [![npm version](https://img.shields.io/npm/v/@seed-ship/mcp-ui-solid.svg)](https://www.npmjs.com/package/@seed-ship/mcp-ui-solid)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-## What's New in v4.2
+## What's New in v4.3
 
 - **Prefilled Forms** — Fields render with pre-populated values + source indicators (detected/inferred/default/user)
-- **Source badges** — Visual cues showing how each value was obtained (checkmark, link, pencil icons)
-- **Muted fields** — High-confidence prefills display with reduced opacity, activate on focus/click
-- **Display hints** — Caption below prefilled fields (e.g. "Rhône — déduit de Lyon")
-- **Auto-submit countdown** — When all required fields are prefilled, optional countdown with cancel
+- **`prefillMode: "resolve"`** — Autocomplete fields accept display names ("Paris"), resolve to codes ("75056") client-side
+- **Smart tag display** — Select/autocomplete show labels not codes for prefilled values
+- **Prefill summary** — "N champs pré-remplis sur M" shown when fields are prefilled
+- **Auto-submit toast** — Compact summary with countdown when ALL fields are prefilled
+- **`valueFormat` validation** — Regex-based format validation on form values (e.g. `"^\\d{5}$"` for INSEE codes)
+- **Autocomplete valueField guarantee** — Always submits resolved code, never display text
 
 ### Prefilled Form Example
 
@@ -28,8 +30,11 @@ SolidJS components + chat toolkit for MCP-generated UI. Part of the [MCP UI ecos
       muted: true,
     },
     {
-      name: 'commune', type: 'text',
-      prefill: 'Lyon',
+      name: 'commune', type: 'autocomplete',
+      apiUrl: 'https://geo.api.gouv.fr/communes',
+      searchParam: 'nom', labelField: 'nom', valueField: 'code',
+      prefill: ['Lyon'],
+      prefillMode: 'resolve', // MCP-UI resolves "Lyon" → code "69123"
       source: 'detected',
       muted: true,
     },
@@ -39,7 +44,7 @@ SolidJS components + chat toolkit for MCP-generated UI. Part of the [MCP UI ecos
       // No prefill — user must choose
     },
   ],
-  autoSubmitDelay: 3000, // optional countdown
+  autoSubmitDelay: 3000, // optional countdown + toast when all prefilled
 }
 ```
 

package/dist/components/FormFieldRenderer.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
 const useConditionalField = require("../hooks/useConditionalField.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<span class=mr-1>`), _tmpl$2 = /* @__PURE__ */ web.template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$3 = /* @__PURE__ */ web.template(`<span class="ml-2 text-[10px] font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-1.5 py-0.5 rounded">Not supported`), _tmpl$4 = /* @__PURE__ */ web.template(`<span class="ml-2 text-[10px] font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 px-1.5 py-0.5 rounded">?`), _tmpl$5 = /* @__PURE__ */ web.template(`<label><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$6 = /* @__PURE__ */ web.template(`<input>`), _tmpl$7 = /* @__PURE__ */ web.template(`<input type=number>`), _tmpl$8 = /* @__PURE__ */ web.template(`<input type=date>`), _tmpl$9 = /* @__PURE__ */ web.template(`<textarea>`), _tmpl$0 = /* @__PURE__ */ web.template(`<option value disabled>`), _tmpl$1 = /* @__PURE__ */ web.template(`<select><!$><!/><!$><!/>`), _tmpl$10 = /* @__PURE__ */ web.template(`<label class="flex items-center gap-2 cursor-pointer"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"><span class="text-sm text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ web.template(`<div class=space-y-2 role=radiogroup>`), _tmpl$12 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-3"><input type=range class="flex-1 h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-600"><span class="text-sm font-mono text-gray-700 dark:text-gray-300 min-w-[3rem] text-right">`), _tmpl$13 = /* @__PURE__ */ web.template(`<label class="flex items-center gap-2 cursor-pointer"><button type=button role=switch><span></span></button><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ web.template(`<fieldset class="border border-gray-200 dark:border-gray-600 rounded-lg p-3"><legend class="text-xs font-medium text-gray-500 dark:text-gray-400 px-1"></legend><p class="text-xs text-gray-400">`), _tmpl$15 = /* @__PURE__ */ web.template(`<input type=text>`), _tmpl$16 = /* @__PURE__ */ web.template(`<p class="text-xs text-amber-500 mt-0.5">Unknown field type: <!$><!/>`), _tmpl$17 = /* @__PURE__ */ web.template(`<p>`), _tmpl$18 = /* @__PURE__ */ web.template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$19 = /* @__PURE__ */ web.template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$20 = /* @__PURE__ */ web.template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$21 = /* @__PURE__ */ web.template(`<option>`), _tmpl$22 = /* @__PURE__ */ web.template(`<label class="flex items-center gap-2 cursor-pointer"><input type=radio class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$23 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$24 = /* @__PURE__ */ web.template(`<div class="p-2 border-b border-gray-200 dark:border-gray-600 flex-shrink-0"><input type=text placeholder=Filter... class="w-full px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"autofocus>`), _tmpl$25 = /* @__PURE__ */ web.template(`<p class="px-3 py-2 text-sm text-gray-400">No matches`), _tmpl$26 = /* @__PURE__ */ web.template(`<div class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg"style=max-height:320px;display:flex;flex-direction:column><!$><!/><div style=overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch><!$><!/><!$><!/>`), _tmpl$27 = /* @__PURE__ */ web.template(`<div class=relative><!$><!/><button type=button><span></span><svg class="w-4 h-4 text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7"></path></svg></button><!$><!/>`), _tmpl$28 = /* @__PURE__ */ web.template(`<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><!$><!/><button type=button class="hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$29 = /* @__PURE__ */ web.template(`<label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-sm"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-gray-900 dark:text-white">`), _tmpl$30 = /* @__PURE__ */ web.template(`<div class="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg max-h-72 overflow-y-auto">`), _tmpl$31 = /* @__PURE__ */ web.template(`<div class=relative><!$><!/><input type=text autocomplete=off><!$><!/>`), _tmpl$32 = /* @__PURE__ */ web.template(`<span class="ml-2 text-xs">&#10003;`), _tmpl$33 = /* @__PURE__ */ web.template(`<button type=button><!$><!/><!$><!/>`), _tmpl$34 = /* @__PURE__ */ web.template(`<div><!$><!/><input type=text>`);
+var _tmpl$ = /* @__PURE__ */ web.template(`<span class=mr-1>`), _tmpl$2 = /* @__PURE__ */ web.template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$3 = /* @__PURE__ */ web.template(`<span class="ml-2 text-[10px] font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-1.5 py-0.5 rounded">Not supported`), _tmpl$4 = /* @__PURE__ */ web.template(`<span class="ml-2 text-[10px] font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 px-1.5 py-0.5 rounded">?`), _tmpl$5 = /* @__PURE__ */ web.template(`<label><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$6 = /* @__PURE__ */ web.template(`<input>`), _tmpl$7 = /* @__PURE__ */ web.template(`<input type=number>`), _tmpl$8 = /* @__PURE__ */ web.template(`<input type=date>`), _tmpl$9 = /* @__PURE__ */ web.template(`<textarea>`), _tmpl$0 = /* @__PURE__ */ web.template(`<option value disabled>`), _tmpl$1 = /* @__PURE__ */ web.template(`<select><!$><!/><!$><!/>`), _tmpl$10 = /* @__PURE__ */ web.template(`<label class="flex items-center gap-2 cursor-pointer"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"><span class="text-sm text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ web.template(`<div class=space-y-2 role=radiogroup>`), _tmpl$12 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-3"><input type=range class="flex-1 h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-600"><span class="text-sm font-mono text-gray-700 dark:text-gray-300 min-w-[3rem] text-right">`), _tmpl$13 = /* @__PURE__ */ web.template(`<label class="flex items-center gap-2 cursor-pointer"><button type=button role=switch><span></span></button><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ web.template(`<fieldset class="border border-gray-200 dark:border-gray-600 rounded-lg p-3"><legend class="text-xs font-medium text-gray-500 dark:text-gray-400 px-1"></legend><p class="text-xs text-gray-400">`), _tmpl$15 = /* @__PURE__ */ web.template(`<input type=text>`), _tmpl$16 = /* @__PURE__ */ web.template(`<p class="text-xs text-amber-500 mt-0.5">Unknown field type: <!$><!/>`), _tmpl$17 = /* @__PURE__ */ web.template(`<p>`), _tmpl$18 = /* @__PURE__ */ web.template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$19 = /* @__PURE__ */ web.template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$20 = /* @__PURE__ */ web.template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$21 = /* @__PURE__ */ web.template(`<option>`), _tmpl$22 = /* @__PURE__ */ web.template(`<label class="flex items-center gap-2 cursor-pointer"><input type=radio class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$23 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$24 = /* @__PURE__ */ web.template(`<div class="p-2 border-b border-gray-200 dark:border-gray-600 flex-shrink-0"><input type=text placeholder=Filter... class="w-full px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"autofocus>`), _tmpl$25 = /* @__PURE__ */ web.template(`<p class="px-3 py-2 text-sm text-gray-400">No matches`), _tmpl$26 = /* @__PURE__ */ web.template(`<div class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg"style=max-height:320px;display:flex;flex-direction:column><!$><!/><div style=overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch><!$><!/><!$><!/>`), _tmpl$27 = /* @__PURE__ */ web.template(`<div class=relative><!$><!/><button type=button><span></span><svg class="w-4 h-4 text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7"></path></svg></button><!$><!/>`), _tmpl$28 = /* @__PURE__ */ web.template(`<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><!$><!/><button type=button class="hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$29 = /* @__PURE__ */ web.template(`<label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-sm"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-gray-900 dark:text-white">`), _tmpl$30 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-1 mb-1 text-xs text-gray-400"><span class="animate-spin h-3 w-3 border border-gray-400 border-t-transparent rounded-full"></span>Resolving...`), _tmpl$31 = /* @__PURE__ */ web.template(`<div class="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg max-h-72 overflow-y-auto">`), _tmpl$32 = /* @__PURE__ */ web.template(`<div class=relative><!$><!/><!$><!/><input type=text autocomplete=off><!$><!/>`), _tmpl$33 = /* @__PURE__ */ web.template(`<span class="ml-2 text-xs">&#10003;`), _tmpl$34 = /* @__PURE__ */ web.template(`<button type=button><!$><!/><!$><!/>`), _tmpl$35 = /* @__PURE__ */ web.template(`<div><!$><!/><input type=text>`);
 const SOURCE_BADGES = {
   detected: {
     icon: "✅",
@@ -721,6 +721,7 @@ const AutocompleteField = (props) => {
   const [suggestions, setSuggestions] = solidJs.createSignal([]);
   const [isOpen, setIsOpen] = solidJs.createSignal(false);
   const [selectedLabels, setSelectedLabels] = solidJs.createSignal(/* @__PURE__ */ new Map());
+  const [resolving, setResolving] = solidJs.createSignal(false);
   let debounceTimer = null;
   const isMultiple = () => props.field.multiple === true;
   const selectedValues = () => isMultiple() ? Array.isArray(props.value) ? props.value : [] : [];
@@ -752,6 +753,69 @@ const AutocompleteField = (props) => {
       setSuggestions([]);
     }
   };
+  const resolvePrefill = async (prefillValues) => {
+    if (!props.field.apiUrl || !props.field.searchParam) return;
+    setResolving(true);
+    const labelField = props.field.labelField || "label";
+    const valueField = props.field.valueField || "value";
+    try {
+      const resolvedValues = [];
+      for (const pv of prefillValues) {
+        const params = new URLSearchParams({
+          [props.field.searchParam]: pv,
+          limit: "1"
+        });
+        if (props.field.extraParams) {
+          for (const [k, v] of Object.entries(props.field.extraParams)) params.set(k, v);
+        }
+        const res = await fetch(`${props.field.apiUrl}?${params}`);
+        if (!res.ok) {
+          resolvedValues.push(pv);
+          continue;
+        }
+        const data = await res.json();
+        const items = Array.isArray(data) ? data : data.results || data.features || [];
+        if (items.length > 0) {
+          const code = String(items[0][valueField] || pv);
+          const label = items[0][labelField] || pv;
+          resolvedValues.push(code);
+          setSelectedLabels((prev) => new Map(prev).set(code, label));
+        } else {
+          resolvedValues.push(pv);
+          setSelectedLabels((prev) => new Map(prev).set(pv, pv));
+        }
+      }
+      if (isMultiple()) {
+        props.onChange(resolvedValues);
+      } else {
+        props.onChange(resolvedValues[0] || "");
+        const label = selectedLabels().get(resolvedValues[0]);
+        if (label) setQuery(label);
+      }
+    } catch {
+    } finally {
+      setResolving(false);
+    }
+  };
+  solidJs.createEffect(() => {
+    const prefill = props.field.prefill;
+    if (!prefill) return;
+    const values = Array.isArray(prefill) ? prefill : [prefill];
+    if (values.length === 0) return;
+    if (props.field.prefillMode === "resolve") {
+      resolvePrefill(values);
+    } else {
+      for (const v of values) {
+        if (!selectedLabels().has(v)) {
+          setSelectedLabels((prev) => new Map(prev).set(v, props.field.displayHint || v));
+        }
+      }
+      if (!isMultiple() && values[0]) {
+        const label = props.field.displayHint || values[0];
+        setQuery(label);
+      }
+    }
+  });
   const handleInput = (value) => {
     setQuery(value);
     if (!isMultiple()) {
@@ -786,6 +850,14 @@ const AutocompleteField = (props) => {
       setSuggestions([]);
     }
   };
+  const handleBlur = () => {
+    setTimeout(() => {
+      setIsOpen(false);
+      if (!isMultiple() && query() && !props.value && props.field.valueField && suggestions().length > 0) {
+        selectSuggestion(suggestions()[0]);
+      }
+    }, 200);
+  };
   const removeChip = (val) => {
     props.onChange(selectedValues().filter((v) => v !== val));
     setSelectedLabels((prev) => {
@@ -799,88 +871,96 @@ const AutocompleteField = (props) => {
     if (debounceTimer) clearTimeout(debounceTimer);
   });
   return (() => {
-    var _el$95 = web.getNextElement(_tmpl$31), _el$99 = _el$95.firstChild, [_el$100, _co$21] = web.getNextMarker(_el$99.nextSibling), _el$97 = _el$100.nextSibling, _el$101 = _el$97.nextSibling, [_el$102, _co$22] = web.getNextMarker(_el$101.nextSibling);
+    var _el$95 = web.getNextElement(_tmpl$32), _el$100 = _el$95.firstChild, [_el$101, _co$21] = web.getNextMarker(_el$100.nextSibling), _el$102 = _el$101.nextSibling, [_el$103, _co$22] = web.getNextMarker(_el$102.nextSibling), _el$98 = _el$103.nextSibling, _el$104 = _el$98.nextSibling, [_el$105, _co$23] = web.getNextMarker(_el$104.nextSibling);
+    web.insert(_el$95, web.createComponent(solidJs.Show, {
+      get when() {
+        return resolving();
+      },
+      get children() {
+        return web.getNextElement(_tmpl$30);
+      }
+    }), _el$101, _co$21);
     web.insert(_el$95, web.createComponent(solidJs.Show, {
       get when() {
         return web.memo(() => !!isMultiple())() && selectedValues().length > 0;
       },
       get children() {
-        var _el$96 = web.getNextElement(_tmpl$23);
-        web.insert(_el$96, web.createComponent(solidJs.For, {
+        var _el$97 = web.getNextElement(_tmpl$23);
+        web.insert(_el$97, web.createComponent(solidJs.For, {
           get each() {
             return selectedValues();
           },
           children: (val) => (() => {
-            var _el$103 = web.getNextElement(_tmpl$28), _el$105 = _el$103.firstChild, [_el$106, _co$23] = web.getNextMarker(_el$105.nextSibling), _el$104 = _el$106.nextSibling;
-            web.insert(_el$103, () => getLabel(val), _el$106, _co$23);
-            _el$104.$$click = () => removeChip(val);
-            web.effect(() => web.setAttribute(_el$104, "aria-label", `Remove ${getLabel(val)}`));
+            var _el$106 = web.getNextElement(_tmpl$28), _el$108 = _el$106.firstChild, [_el$109, _co$24] = web.getNextMarker(_el$108.nextSibling), _el$107 = _el$109.nextSibling;
+            web.insert(_el$106, () => getLabel(val), _el$109, _co$24);
+            _el$107.$$click = () => removeChip(val);
+            web.effect(() => web.setAttribute(_el$107, "aria-label", `Remove ${getLabel(val)}`));
             web.runHydrationEvents();
-            return _el$103;
+            return _el$106;
           })()
         }));
-        return _el$96;
+        return _el$97;
       }
-    }), _el$100, _co$21);
-    _el$97.addEventListener("blur", () => setTimeout(() => setIsOpen(false), 200));
-    _el$97.addEventListener("focus", () => {
+    }), _el$103, _co$22);
+    _el$98.addEventListener("blur", handleBlur);
+    _el$98.addEventListener("focus", () => {
       if (suggestions().length) setIsOpen(true);
     });
-    _el$97.$$input = (e) => handleInput(e.currentTarget.value);
+    _el$98.$$input = (e) => handleInput(e.currentTarget.value);
     web.insert(_el$95, web.createComponent(solidJs.Show, {
       get when() {
         return web.memo(() => !!isOpen())() && suggestions().length > 0;
       },
       get children() {
-        var _el$98 = web.getNextElement(_tmpl$30);
-        web.insert(_el$98, web.createComponent(solidJs.For, {
+        var _el$99 = web.getNextElement(_tmpl$31);
+        web.insert(_el$99, web.createComponent(solidJs.For, {
           get each() {
             return suggestions();
           },
           children: (item) => {
             const isSelected = () => isMultiple() && selectedValues().includes(item.value);
             return (() => {
-              var _el$107 = web.getNextElement(_tmpl$33), _el$109 = _el$107.firstChild, [_el$110, _co$24] = web.getNextMarker(_el$109.nextSibling), _el$111 = _el$110.nextSibling, [_el$112, _co$25] = web.getNextMarker(_el$111.nextSibling);
-              _el$107.$$click = () => selectSuggestion(item);
-              _el$107.$$mousedown = (e) => e.preventDefault();
-              web.insert(_el$107, () => item.label, _el$110, _co$24);
-              web.insert(_el$107, web.createComponent(solidJs.Show, {
+              var _el$110 = web.getNextElement(_tmpl$34), _el$112 = _el$110.firstChild, [_el$113, _co$25] = web.getNextMarker(_el$112.nextSibling), _el$114 = _el$113.nextSibling, [_el$115, _co$26] = web.getNextMarker(_el$114.nextSibling);
+              _el$110.$$click = () => selectSuggestion(item);
+              _el$110.$$mousedown = (e) => e.preventDefault();
+              web.insert(_el$110, () => item.label, _el$113, _co$25);
+              web.insert(_el$110, web.createComponent(solidJs.Show, {
                 get when() {
                   return isSelected();
                 },
                 get children() {
-                  return web.getNextElement(_tmpl$32);
+                  return web.getNextElement(_tmpl$33);
                 }
-              }), _el$112, _co$25);
+              }), _el$115, _co$26);
               web.effect((_p$) => {
                 var _v$83 = `w-full text-left px-3 py-2 text-sm hover:bg-blue-50 dark:hover:bg-blue-900/20 ${isSelected() ? "text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-900/10" : "text-gray-900 dark:text-white"}`, _v$84 = isSelected();
-                _v$83 !== _p$.e && web.className(_el$107, _p$.e = _v$83);
-                _v$84 !== _p$.t && web.setProperty(_el$107, "disabled", _p$.t = _v$84);
+                _v$83 !== _p$.e && web.className(_el$110, _p$.e = _v$83);
+                _v$84 !== _p$.t && web.setProperty(_el$110, "disabled", _p$.t = _v$84);
                 return _p$;
               }, {
                 e: void 0,
                 t: void 0
               });
               web.runHydrationEvents();
-              return _el$107;
+              return _el$110;
             })();
           }
         }));
-        return _el$98;
+        return _el$99;
       }
-    }), _el$102, _co$22);
+    }), _el$105, _co$23);
     web.effect((_p$) => {
-      var _v$80 = isMultiple() && selectedValues().length ? "Add more..." : props.field.placeholder, _v$81 = props.disabled, _v$82 = props.baseClass;
-      _v$80 !== _p$.e && web.setAttribute(_el$97, "placeholder", _p$.e = _v$80);
-      _v$81 !== _p$.t && web.setProperty(_el$97, "disabled", _p$.t = _v$81);
-      _v$82 !== _p$.a && web.className(_el$97, _p$.a = _v$82);
+      var _v$80 = isMultiple() && selectedValues().length ? "Add more..." : props.field.placeholder, _v$81 = props.disabled || resolving(), _v$82 = props.baseClass;
+      _v$80 !== _p$.e && web.setAttribute(_el$98, "placeholder", _p$.e = _v$80);
+      _v$81 !== _p$.t && web.setProperty(_el$98, "disabled", _p$.t = _v$81);
+      _v$82 !== _p$.a && web.className(_el$98, _p$.a = _v$82);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     });
-    web.effect(() => web.setProperty(_el$97, "value", query()));
+    web.effect(() => web.setProperty(_el$98, "value", query()));
     web.runHydrationEvents();
     return _el$95;
   })();
@@ -907,46 +987,46 @@ const TagsField = (props) => {
     }
   };
   return (() => {
-    var _el$113 = web.getNextElement(_tmpl$34), _el$116 = _el$113.firstChild, [_el$117, _co$26] = web.getNextMarker(_el$116.nextSibling), _el$115 = _el$117.nextSibling;
-    web.insert(_el$113, web.createComponent(solidJs.Show, {
+    var _el$116 = web.getNextElement(_tmpl$35), _el$119 = _el$116.firstChild, [_el$120, _co$27] = web.getNextMarker(_el$119.nextSibling), _el$118 = _el$120.nextSibling;
+    web.insert(_el$116, web.createComponent(solidJs.Show, {
       get when() {
         return (props.value || []).length > 0;
       },
       get children() {
-        var _el$114 = web.getNextElement(_tmpl$23);
-        web.insert(_el$114, web.createComponent(solidJs.For, {
+        var _el$117 = web.getNextElement(_tmpl$23);
+        web.insert(_el$117, web.createComponent(solidJs.For, {
           get each() {
             return props.value || [];
           },
           children: (tag) => (() => {
-            var _el$118 = web.getNextElement(_tmpl$28), _el$120 = _el$118.firstChild, [_el$121, _co$27] = web.getNextMarker(_el$120.nextSibling), _el$119 = _el$121.nextSibling;
-            web.insert(_el$118, tag, _el$121, _co$27);
-            _el$119.$$click = () => removeTag(tag);
-            web.setAttribute(_el$119, "aria-label", `Remove ${tag}`);
+            var _el$121 = web.getNextElement(_tmpl$28), _el$123 = _el$121.firstChild, [_el$124, _co$28] = web.getNextMarker(_el$123.nextSibling), _el$122 = _el$124.nextSibling;
+            web.insert(_el$121, tag, _el$124, _co$28);
+            _el$122.$$click = () => removeTag(tag);
+            web.setAttribute(_el$122, "aria-label", `Remove ${tag}`);
             web.runHydrationEvents();
-            return _el$118;
+            return _el$121;
           })()
         }));
-        return _el$114;
+        return _el$117;
       }
-    }), _el$117, _co$26);
-    _el$115.addEventListener("blur", addTag);
-    _el$115.$$keydown = handleKeyDown;
-    _el$115.$$input = (e) => setInput(e.currentTarget.value);
+    }), _el$120, _co$27);
+    _el$118.addEventListener("blur", addTag);
+    _el$118.$$keydown = handleKeyDown;
+    _el$118.$$input = (e) => setInput(e.currentTarget.value);
     web.effect((_p$) => {
       var _v$85 = props.placeholder || "Type and press Enter...", _v$86 = props.disabled, _v$87 = props.baseClass;
-      _v$85 !== _p$.e && web.setAttribute(_el$115, "placeholder", _p$.e = _v$85);
-      _v$86 !== _p$.t && web.setProperty(_el$115, "disabled", _p$.t = _v$86);
-      _v$87 !== _p$.a && web.className(_el$115, _p$.a = _v$87);
+      _v$85 !== _p$.e && web.setAttribute(_el$118, "placeholder", _p$.e = _v$85);
+      _v$86 !== _p$.t && web.setProperty(_el$118, "disabled", _p$.t = _v$86);
+      _v$87 !== _p$.a && web.className(_el$118, _p$.a = _v$87);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     });
-    web.effect(() => web.setProperty(_el$115, "value", input()));
+    web.effect(() => web.setProperty(_el$118, "value", input()));
     web.runHydrationEvents();
-    return _el$113;
+    return _el$116;
   })();
 };
 web.delegateEvents(["focusin", "click", "input", "mousedown", "keydown"]);