Fix/searchabledropdown/selected id multiple

.changeset/yellow-carrots-play.md

@@ -0,0 +1,13 @@
+---
+'@equinor/fusion-wc-searchable-dropdown': patch
+'@equinor/fusion-wc-storybook': patch
+---
+
+### @equinor/fusion-wc-searchable-dropdown
+
+Fix: support for setting selectedId in initalItems
+Fix: better handling of multiple selections
+
+### @equinor/fusion-wc-storybook
+
+Fix: can use selectedId in stories and eslint

packages/searchable-dropdown/src/dropdown/element.ts

@@ -131,12 +131,18 @@ export class SearchableDropdownElement
   @query('fwc-list')
   listElement: ListElement | undefined;
 
+  updated(props: Map<string, string | null | undefined>) {
+    if (props.has('selectedId')) {
+      this.controller.initialItemsMutation();
+    }
+  }
+
   /* Build fwc-list-items */
   protected buildListItem(item: SearchableDropdownResultItem): HTMLTemplateResult {
     this.controller._listItems.push(item.id);
     const itemClasses = {
       'list-item': true,
-      'item-selected': !!item.isSelected,
+      'item-selected': !!item.isSelected || !!this.controller._selectedItems.find((si) => si.id === item.id),
       'item-error': !!item.isError,
     };
 
@@ -286,7 +292,7 @@ export class SearchableDropdownElement
           <fwc-textinput
             label=${ifDefined(this.label)}
             type="text"
-            value=${this.value}
+            value=${this.controller._selectedItems.map((item) => item.title).join(', ')}
             name="searchabledropdown"
             variant=${variant}
             disabled=${ifDefined(disabled)}

packages/searchable-dropdown/src/provider/controller.ts

@@ -5,7 +5,6 @@ import {
   SearchableDropdownResult,
   SearchableDropdownResolver,
   SearchableDropdownControllerHost,
-  SearchableDropdownResultItem,
   SearchableDropdownSelectEvent,
 } from '../types';
 import { SearchableDropdownConnectEvent, ExplicitEventTarget } from '../types';
@@ -49,8 +48,8 @@ export class SearchableDropdownController implements ReactiveController {
         } else {
           result = await this.resolver.searchQuery(qs);
         }
-        // set isSelected on result items
-        this.result = this.mutateResult(result);
+
+        this.result = result;
         return this.result;
       },
       () => [this.#queryString],
@@ -134,36 +133,58 @@ export class SearchableDropdownController implements ReactiveController {
   };
 
   /**
-   * Mutates result to set parameters like isSelected.
-   * @param result SearchableDropdownResult
-   * @returns result
+   * Set/clear selected id in dropdown list
+   * @param selectedI
    */
-  private mutateResult(result: SearchableDropdownResult) {
-    if (result) {
-      const { selectedId } = this.#host;
-      for (let i = 0; i < result.length; i++) {
-        const item = result[i];
-
-        if (item.type === 'section' && item.children?.length) {
-          for (let x = 0; x < item.children.length; x++) {
-            const kid = item.children[x];
-            if (this._selectedItems.find((s) => s.id === kid.id) || selectedId === kid.id) {
-              kid.isSelected = true;
+  private setSelectedItem(selectedId: string | null) {
+    const isMultiple = this.#host.multiple;
+
+    this.result = this.result?.map((item) => {
+      if (item.type === 'section' && item.children?.length) {
+        item.children = item.children.map((child) => {
+          if (selectedId === child.id) {
+            child.isSelected = true;
+            if (isMultiple) {
+              this._selectedItems.push(child);
             } else {
-              kid.isSelected = false;
+              this._selectedItems = [child];
             }
+          } else if (!isMultiple) {
+            child.isSelected = false;
           }
-        } else {
-          if (this._selectedItems.find((s) => s.id === item.id) || selectedId === item.id) {
-            item.isSelected = true;
+          return child;
+        });
+      } else {
+        if (selectedId === item.id) {
+          item.isSelected = true;
+          if (isMultiple) {
+            this._selectedItems.push(item);
           } else {
-            item.isSelected = false;
+            this._selectedItems = [item];
           }
+        } else if (!isMultiple) {
+          item.isSelected = false;
         }
       }
-    }
 
-    return result;
+      return item;
+    });
+  }
+
+  /**
+   * Mutates the initialResult to set parameters like isSelected.
+   * @returns SearchableDropdownResult
+   */
+  public initialItemsMutation() {
+    const { selectedId } = this.#host;
+
+    this.setSelectedItem(selectedId ?? null);
+
+    // clear any selected items on null
+    if (selectedId === null) {
+      this._selectedItems = [];
+      this.#host.requestUpdate();
+    }
   }
 
   /**
@@ -185,51 +206,40 @@ export class SearchableDropdownController implements ReactiveController {
       const id = this._listItems[event.detail.index];
 
       /* Find selected item in resolver result list */
-      let selectedItem: SearchableDropdownResultItem | undefined;
-
-      // get selected item from result
-      for (const item of this.result) {
-        if (item.id === id) {
-          selectedItem = item;
-          break;
-        } else if (item.children) {
-          for (const childItem of item.children) {
-            if (childItem.id === id) {
-              selectedItem = childItem;
-              break;
-            }
-          }
+      const selectedItem = this.result.find((item) => {
+        if (item.children?.length) {
+          return item.children.find((child) => child.id === id);
         }
-      }
+
+        return item.id === id;
+      });
 
       /* Set Error if none matched the resolver result */
       if (!selectedItem?.id) {
         throw new Error('SearchableDropdownController could not find a match in result provided by resolver.');
       }
 
       /*  Set active state and save selected item in state */
-      if (this.#host.multiple) {
-        if (this._selectedItems.find((si) => si.id === selectedItem?.id)) {
-          /*  Already selected so clear it from selections */
-          selectedItem.isSelected = false;
-          this._selectedItems = this._selectedItems.filter((i) => i.id !== selectedItem?.id);
-          this.#host.value = '';
+      if (this._selectedItems.find((si) => si.id === selectedItem?.id)) {
+        /*  Already selected so clear it from selections */
+        selectedItem.isSelected = false;
+        this._selectedItems = this._selectedItems.filter((i) => i.id !== selectedItem?.id);
+      } else {
+        /*  Adds new item to selections */
+        if (this.#host.multiple) {
+          this._selectedItems.push(selectedItem);
         } else {
-          /*  Adds new item to selections */
+          // make sure all others are unactive
+          this.setSelectedItem(null);
+          // select only this item as active
           selectedItem.isSelected = true;
-          this._selectedItems.push(selectedItem);
-          this.#host.value = selectedItem?.title || '';
+
+          this._selectedItems = [selectedItem];
         }
-      } else {
-        /*  Adds new item to selections */
-        this._selectedItems = [selectedItem];
-        this.#host.value = selectedItem?.title || '';
       }
     } else {
-      /* FALSE === this.result && this._listItems */
-      /* Clear selected states */
+      /* Clear selected states if any */
       this._selectedItems = [];
-      this.#host.value = '';
     }
 
     if (!this.#host.multiple) {
@@ -246,9 +256,6 @@ export class SearchableDropdownController implements ReactiveController {
       }),
     );
 
-    /* Sets items isSelected in task */
-    this.task.run();
-
     /* Refresh host */
     this.#host.requestUpdate();
   }
@@ -278,7 +285,6 @@ export class SearchableDropdownController implements ReactiveController {
       this.#host.textInputElement.blur();
     }
 
-    this.#host.value = '';
     this._selectedItems = [];
     this.#queryString = '';
 

storybook/stories/input/searchable-dropdown.stories.ts

@@ -28,6 +28,7 @@ const render = (props: SearchableDropdownProps) => html`
     placeholder="${ifDefined(props.placeholder)}"
     leadingIcon="${ifDefined(props.leadingIcon)}"
     multiple="${ifDefined(props.multiple)}"
+    selectedId="${ifDefined(props.selectedId)}"
     select-text-on-focus="${ifDefined(props.selectTextOnFocus)}"
   ></fwc-searchable-dropdown>
 `;
@@ -39,17 +40,17 @@ export const Default: Story = {
 
 export const Label: Story = {
   ...Default,
-  render: (props) => render({ ...props, label: "Label" }),
+  render: (props) => render({ ...props, label: 'Label' }),
 };
 
 export const Placeholder: Story = {
   ...Default,
-  render: (props) => render({ ...props, placeholder: "Placeholder" }),
+  render: (props) => render({ ...props, placeholder: 'Placeholder' }),
 };
 
 export const LeadingIcon: Story = {
   ...Default,
-  render: (props) => render({ ...props, leadingIcon: "list" }),
+  render: (props) => render({ ...props, leadingIcon: 'list' }),
 };
 
 export const Multiple: Story = {