svelte-multiselect 8.2.2 → 8.2.3

package/MultiSelect.svelte

@@ -399,36 +399,39 @@ const dragstart = (idx) => (event) => {
         {/if}
       </li>
     {/each}
+    <li style="display: contents;">
+      <input
+        class={inputClass}
+        bind:this={input}
+        {autocomplete}
+        bind:value={searchText}
+        on:mouseup|self|stopPropagation={open_dropdown}
+        on:keydown|stopPropagation={handle_keydown}
+        on:focus
+        on:focus={open_dropdown}
+        {id}
+        {disabled}
+        {inputmode}
+        {pattern}
+        placeholder={selected.length == 0 ? placeholder : null}
+        aria-invalid={invalid ? `true` : null}
+        ondrop="return false"
+        on:blur
+        on:change
+        on:click
+        on:keydown
+        on:keyup
+        on:mousedown
+        on:mouseenter
+        on:mouseleave
+        on:touchcancel
+        on:touchend
+        on:touchmove
+        on:touchstart
+      />
+      <!-- the above on:* lines forward potentially useful DOM events -->
+    </li>
   </ul>
-  <input
-    class={inputClass}
-    bind:this={input}
-    {autocomplete}
-    bind:value={searchText}
-    on:mouseup|self|stopPropagation={open_dropdown}
-    on:keydown|stopPropagation={handle_keydown}
-    on:focus
-    on:focus={open_dropdown}
-    {id}
-    {disabled}
-    {inputmode}
-    {pattern}
-    placeholder={selected.length == 0 ? placeholder : null}
-    aria-invalid={invalid ? `true` : null}
-    on:blur
-    on:change
-    on:click
-    on:keydown
-    on:keyup
-    on:mousedown
-    on:mouseenter
-    on:mouseleave
-    on:touchcancel
-    on:touchend
-    on:touchmove
-    on:touchstart
-  />
-  <!-- the above on:* lines forward potentially useful DOM events -->
   {#if loading}
     <slot name="spinner">
       <CircleSpinner />
@@ -538,8 +541,8 @@ const dragstart = (idx) => (event) => {
     border: var(--sms-border, 1pt solid lightgray);
     border-radius: var(--sms-border-radius, 3pt);
     background: var(--sms-bg);
-    width: var(--sms-width, 100%);
-    max-width: var(--sms-max-width, 800px);
+    width: var(--sms-width);
+    max-width: var(--sms-max-width);
     padding: var(--sms-padding, 0 3pt);
     color: var(--sms-text-color);
     font-size: var(--sms-font-size, inherit);
@@ -608,23 +611,19 @@ const dragstart = (idx) => (event) => {
     margin: auto 0; /* CSS reset */
     padding: 0; /* CSS reset */
   }
-  :where(div.multiselect > ul.selected + input) {
+  :where(div.multiselect > ul.selected > li > input) {
     border: none;
     outline: none;
     background: none;
+    flex: 1; /* this + next line fix issue #12 https://git.io/JiDe3 */
+    min-width: 2em;
     /* ensure input uses text color and not --sms-selected-text-color */
     color: var(--sms-text-color);
     font-size: inherit;
     cursor: inherit; /* needed for disabled state */
     border-radius: 0; /* reset ul.selected > li */
-    width: 0;
-    visibility: hidden;
-  }
-  :where(div.multiselect:focus-within > ul.selected + input) {
-    visibility: visible;
-    width: 3em;
   }
-  :where(div.multiselect > ul.selected + input::placeholder) {
+  :where(div.multiselect > ul.selected > li > input::placeholder) {
     padding-left: 5pt;
     color: var(--sms-placeholder-color);
     opacity: var(--sms-placeholder-opacity);

package/changelog.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file. Dates are d
 
 <!-- auto-changelog-above -->
 
+#### [v8.2.3](https://github.com/janosh/svelte-multiselect/compare/v8.2.2...v8.2.3)
+
+> 28 December 2022
+
+- add 'Open in StackBlitz' links to example code fences [`ac07557`](https://github.com/janosh/svelte-multiselect/commit/ac075576c261892807faa0071b5f3e0b5b4fcd2c)
+- v8.2.2 contains unintended breaking changes and was deprecated on NPM (see [#188](https://github.com/janosh/svelte-multiselect/issues/188)). Use this fixed release instead. [`ef4d669`](https://github.com/janosh/svelte-multiselect/commit/ef4d669)
+
 #### [v8.2.2](https://github.com/janosh/svelte-multiselect/compare/v8.2.1...v8.2.2)
 
 > 18 December 2022

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "8.2.2",
+  "version": "8.2.3",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",

package/readme.md

@@ -485,8 +485,8 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `background: var(--sms-bg)`
   - `color: var(--sms-text-color)`
   - `min-height: var(--sms-min-height, 22pt)`
-  - `width: var(--sms-width, 100%)`
-  - `max-width: var(--sms-max-width, 800px)`
+  - `width: var(--sms-width)`
+  - `max-width: var(--sms-max-width)`
   - `margin: var(--sms-margin)`
   - `font-size: var(--sms-font-size, inherit)`
 - `div.multiselect.open`