Fix/person/select/selectedperson null

.changeset/good-kiwis-guess.md

@@ -0,0 +1,16 @@
+---
+"@equinor/fusion-wc-person": patch
+---
+
+### Changes in `PersonSelectController`
+
+- Updated the `attrSelectPerson` method to clear `selectedIds` when `personData` or `selectedPerson` is null.
+- Updated the `clearInput` method to reset `azureId` and `upn` properties.
+- Refactored the `clear` method to use `#firePersonSelectEvent` instead of directly dispatching the event.
+- Removed unnecessary comments and cleaned up the code.
+
+### Changes in `PersonSelectElement`
+
+- Added a new CSS class `.selected-persons` to hide the text input when a person is selected.
+- Updated the `selectedPersonsTemplate` method to be conditionally rendered based on the `selectedIds` size and `isOpen` state.
+- Adjusted the `classMap` to include the `selected-persons` class based on the `selectedIds` size and `isOpen`

packages/person/src/components/select/controller.ts

@@ -51,7 +51,7 @@ export class PersonSelectController implements ReactiveController {
   }
 
   /**
-   * Resolve person from selectedPerson property.
+   * Resolve personInfo task from selectedPerson property.
    * Runs on host updated when property is changed
    */
   public attrSelectPerson(select: string | null | undefined) {
@@ -186,8 +186,9 @@ export class PersonSelectController implements ReactiveController {
     this.#firePersonSelectEvent(personData);
 
     /* clear component if null */
-    if (personData === null) {
+    if (personData === null || this.#host.selectedPerson === null) {
       this.clearInput();
+      this.selectedIds.clear();
     }
   }
 
@@ -206,6 +207,8 @@ export class PersonSelectController implements ReactiveController {
     this.#host.value = '';
     this.#host.search = '';
     this.#host.textInputElement.value = '';
+    this.#host.azureId = '';
+    this.#host.upn = '';
   }
 
   public clear() {
@@ -215,19 +218,8 @@ export class PersonSelectController implements ReactiveController {
       this.selectedIds.clear();
     }
 
-    if (this.#host.selectedPerson) {
-      this.#host.selectedPerson = null;
-    }
-
     /* Dispatch custom select event with our details */
-    this.#host.dispatchEvent(
-      new PersonSelectEvent({
-        detail: {
-          selected: null,
-        },
-        bubbles: true,
-      }),
-    );
+    this.#firePersonSelectEvent(null);
   }
 
   /**
@@ -312,7 +304,6 @@ export class PersonSelectController implements ReactiveController {
     if (event.key === 'ArrowDown') {
       /* focus on the fwc-list' */
       if (this._isOpen && this.#host.listItems.length) {
-        // this.#host.listElement?.focus();
         this.#host.listElement?.focusItemAtIndex(0);
       }
       return;
@@ -324,7 +315,6 @@ export class PersonSelectController implements ReactiveController {
     }
     this.timer = setTimeout(() => {
       const value = target.value.trim().toLowerCase();
-      // this.#search = value;
       this.#host.search = value;
       this.#host.requestUpdate();
     }, 500);

packages/person/src/components/select/element.css.ts

@@ -14,6 +14,9 @@ export const styles: CSSResult[] = [
     fwc-person-list-item {
       --fwc-person-list-item-background: #ffffff;
     }
+    .selected-persons fwc-textinput {
+      opacity: 0;
+    }
     #selected-persons {
       list-style: none;
       padding: 0;

packages/person/src/components/select/element.ts

@@ -180,7 +180,7 @@ export class PersonSelectElement
       // task is complete and we have the attribute
       if (this.selectedPerson && this.tasks.info.status === TaskStatus.COMPLETE) {
         // save result in controller if not already there
-        if (!this.controllers.element.selectedIds.has(this.tasks.info.value?.azureId as string)) {
+        if (!this.controllers.element.selectedIds.size) {
           this.controllers.element.selectPersonInfo(this.tasks.info.value as PersonInfo);
         }
       }
@@ -305,6 +305,7 @@ export class PersonSelectElement
       dense: dense == true,
       'variant-filled': variant === 'filled',
       'variant-outlined': variant === 'outlined',
+      'selected-persons': this.controllers.element.selectedIds.size > 0 && !this.controllers.element.isOpen,
     };
 
     /** Select person by selectedPerson property on info task */
@@ -313,6 +314,7 @@ export class PersonSelectElement
     return html`<div id=${this.id} class=${classMap(cssClasses)}>
         <div class="input">
           <slot name="leading"></slot>
+          ${this.selectedPersonsTemplate()}
           <fwc-textinput
             label=${ifDefined(this.label)}
             type="text"
@@ -328,7 +330,6 @@ export class PersonSelectElement
             }}
             @keyup=${this.controllers.element.handleKeyup}
           ></fwc-textinput>
-          ${this.selectedPersonsTemplate()}
           <slot name="trailing">
             <span slot="trailing">
               ${this.controllers.element.selectedIds.size || this.controllers.element.isOpen

storybook/stories/person/person-select.stories.ts

@@ -2,9 +2,7 @@ import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import type { Meta, StoryObj } from '@storybook/web-components';
-import { setCustomElementsManifest } from '@storybook/web-components';
 import PersonSelect, { PersonSelectElementProps, PersonSelectEvent } from '@equinor/fusion-wc-person/select';
-import cem from '@equinor/fusion-wc-person/custom-elements.json';
 
 import { faker } from '@faker-js/faker';
 import { personProviderDecorator } from './person-provider';
@@ -13,11 +11,9 @@ PersonSelect;
 
 faker.seed(1);
 
-setCustomElementsManifest(cem);
-
 type Story = StoryObj<PersonSelectElementProps>;
 
-const meta: Meta<typeof cem> = {
+const meta: Meta<typeof PersonSelect> = {
   title: 'select',
   component: 'fwc-person-select',
   decorators: [personProviderDecorator],