Prevent empty style attributes on ul.selected > li and ul.options > li (#304)

* Prevent style attribute to be equal to ' null' string

* migrate test to svelte 5 and fix expect by using hasAttribute()

* bump eslint

---------

Co-authored-by: Janosh Riebesell <[email protected]>

Author: bijela-gora

.pre-commit-config.yaml

@@ -38,7 +38,7 @@ repos:
         exclude: changelog\.md
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.24.0
+    rev: v9.26.0
     hooks:
       - id: eslint
         types: [file]

src/lib/MultiSelect.svelte

@@ -546,6 +546,9 @@
     style={ulSelectedStyle}
   >
     {#each selected as option, idx (duplicates ? [key(option), idx] : key(option))}
+      {@const selectedOptionStyle =
+        [get_style(option, `selected`), liSelectedStyle].filter(Boolean).join(` `) ||
+        null}
       <li
         class={liSelectedClass}
         role="option"
@@ -556,7 +559,7 @@
         ondrop={drop(idx)}
         ondragenter={() => (drag_idx = idx)}
         class:active={drag_idx === idx}
-        style="{get_style(option, `selected`)} {liSelectedStyle}"
+        style={selectedOptionStyle}
       >
         {#if selectedItem}
           {@render selectedItem({
@@ -689,6 +692,9 @@
           disabledTitle = defaultDisabledTitle,
         } = optionItem instanceof Object ? optionItem : { label: optionItem }}
         {@const active = activeIndex === idx}
+        {@const optionStyle =
+          [get_style(optionItem, `option`), liOptionStyle].filter(Boolean).join(` `) ||
+          null}
         <li
           onclick={(event) => {
             if (!disabled) add(optionItem, event)
@@ -708,7 +714,7 @@
           }}
           role="option"
           aria-selected="false"
-          style="{get_style(optionItem, `option`)} {liOptionStyle}"
+          style={optionStyle}
           onkeydown={(event) => {
             if (!disabled && (event.key === `Enter` || event.code === `Space`)) {
               event.preventDefault()

tests/unit/MultiSelect.svelte.test.ts

@@ -1478,6 +1478,27 @@ test.each([
   },
 )
 
+test.each([
+  { prop: `liSelectedStyle`, css_selector: `ul.selected > li` },
+  { prop: `liOptionStyle`, css_selector: `ul.options > li` },
+])(
+  `MultiSelect doesn't add style attribute to element '$css_selector' if '$prop' prop not passed`,
+  async ({ prop, css_selector }) => {
+    mount(MultiSelect, {
+      target: document.body,
+      props: { options: [1, 2, 3], selected: [1] },
+    })
+
+    await tick()
+
+    const elem = doc_query(css_selector)
+    await tick()
+
+    const err_msg = `style attribute should be absent when '${prop}' not passed, but hasAttribute('style') is ${elem.hasAttribute(`style`)}`
+    expect(elem.hasAttribute(`style`), err_msg).toBe(false)
+  },
+)
+
 test.each([true, false, `desktop`] as const)(
   `closeDropdownOnSelect=%s controls input focus and dropdown closing`,
   async (closeDropdownOnSelect) => {