svelte-multiselect 3.2.2 → 3.2.3

package/MultiSelect.svelte

@@ -82,7 +82,7 @@ $: if (
     // make the first filtered option active
     activeOption = matchingEnabledOptions[0];
 function add(label) {
-    if (selected.length - (maxSelect ?? 0) < 1)
+    if (maxSelect && maxSelect > 1 && selected.length >= maxSelect)
         wiggle = true;
     if (!readonly &&
         !selectedLabels.includes(label) &&
@@ -115,9 +115,6 @@ function remove(label) {
     dispatch(`change`, { option, type: `remove` });
 }
 function setOptionsVisible(show) {
-    // nothing to do if visibility is already as intended
-    if (readonly || show === showOptions)
-        return;
     showOptions = show;
     if (show)
         input?.focus();
@@ -209,7 +206,7 @@ display above those of another following shortly after it -->
   use:onClickOutside={() => setOptionsVisible(false)}
   use:onClickOutside={() => dispatch(`blur`)}
 >
-  <ExpandIcon height="14pt" style="padding: 0 3pt 0 1pt;" />
+  <ExpandIcon style="min-width: 1em; padding: 0 1pt;" />
   <ul class="selected {ulSelectedClass}">
     {#each selected as option, idx}
       <li class={liSelectedClass}>
@@ -228,18 +225,20 @@ display above those of another following shortly after it -->
         {/if}
       </li>
     {/each}
+    <li style="display: contents;">
+      <input
+        bind:this={input}
+        autocomplete="off"
+        bind:value={searchText}
+        on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}
+        on:keydown={handleKeydown}
+        on:focus={() => setOptionsVisible(true)}
+        {id}
+        {name}
+        placeholder={selectedLabels.length ? `` : placeholder}
+      />
+    </li>
   </ul>
-  <input
-    bind:this={input}
-    autocomplete="off"
-    bind:value={searchText}
-    on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}
-    on:keydown={handleKeydown}
-    on:focus={() => setOptionsVisible(true)}
-    {id}
-    {name}
-    placeholder={selectedLabels.length ? `` : placeholder}
-  />
   {#if readonly}
     <ReadOnlyIcon height="14pt" />
   {:else if selected.length > 0}
@@ -296,14 +295,13 @@ display above those of another following shortly after it -->
     position: relative;
     margin: 1em 0;
     align-items: center;
-    min-height: 18pt;
     display: flex;
     cursor: text;
     padding: 0 3pt;
     border: var(--sms-border, 1pt solid lightgray);
     border-radius: var(--sms-border-radius, 5pt);
     background: var(--sms-input-bg);
-    height: var(--sms-input-height, 2em);
+    min-height: var(--sms-input-min-height, 22pt);
   }
   :where(div.multiselect.open) {
     z-index: var(--sms-open-z-index, 4);
@@ -317,6 +315,7 @@ display above those of another following shortly after it -->
 
   :where(div.multiselect > ul.selected) {
     display: flex;
+    flex: 1;
     padding: 0;
     margin: 0;
     flex-wrap: wrap;
@@ -326,7 +325,8 @@ display above those of another following shortly after it -->
     border-radius: 4pt;
     display: flex;
     margin: 2pt;
-    padding: 0 0 0 5pt;
+    line-height: normal;
+    padding: 1pt 2pt 1pt 5pt;
     transition: 0.3s;
     white-space: nowrap;
     background: var(--sms-selected-bg, var(--sms-active-color, cornflowerblue));
@@ -354,7 +354,7 @@ display above those of another following shortly after it -->
     transform: scale(1.04);
   }
 
-  :where(div.multiselect > input) {
+  :where(div.multiselect > ul.selected > li > input) {
     border: none;
     outline: none;
     background: none;

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "type": "module",
   "svelte": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",

package/readme.md

@@ -221,7 +221,7 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when component has focus. Defaults to `--sms-active-color` if not set which defaults to `cornflowerblue`.
 - `div.multiselect.readonly`
   - `background: var(--sms-readonly-bg, lightgray)`: Background when in readonly state.
-- `div.multiselect > input`
+- `div.multiselect > ul.selected > li > input`
   - `color: var(--sms-text-color, inherit)`: Input text color.
 - `div.multiselect > ul.selected > li`
   - `background: var(--sms-selected-bg, var(--sms-active-color, cornflowerblue))`: Background of selected options.
@@ -300,7 +300,7 @@ You can alternatively style every part of this component with more fine-grained
 :global(div.multiselect > ul.selected > li button, button.remove-all) {
   /* buttons to remove a single or all selected options at once */
 }
-:global(div.multiselect > input) {
+:global(div.multiselect > ul.selected > li > input) {
   /* input inside the top-level wrapper div */
 }
 :global(div.multiselect > ul.options) {