Fix/person/select/selectedperson clear (#1566)

* fix(person-select): Fixes issue with clearing selected person * docs: changeset * docs: changeset with markdown
equinor · Aug 12, 2024 · 5b61628 · 5b61628
1 parent 2ccdec0
commit 5b61628
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 17 deletions.
diff --git a/.changeset/cyan-items-provide.md b/.changeset/cyan-items-provide.md
@@ -0,0 +1,94 @@
+---
+'@equinor/fusion-wc-person': patch
+---
+
+Fixes clearing person when using the `selectedPerson` property
+
+# Summary of Latest Changes in This Branch Compared to Main Branch
+
+## File: `controller.ts`
+
+### Lines: 199-264
+
+### Summary of Changes:
+
+1. **New Methods Added:**
+   - **`clearInput()`**: Clears the input fields and resets the host's value and search properties.
+   - **`clear()`**: Calls `clearInput()`, clears selected IDs, resets the selected person, and dispatches a custom `PersonSelectEvent`.
+   - **`closeClick(e: MouseEvent | KeyboardEvent)`**: Handles the close icon click event, blurs the input and close icon, closes the dropdown if open, and calls an external close handler if defined.
+
+### Detailed Changes:
+
+1. **Method: `clearInput()`**
+   - **Purpose:** Clears the input fields and resets the host's value and search properties.
+   - **Code:**
+     ```typescript
+     public clearInput() {
+       this.#host.value = '';
+       this.#host.search = '';
+       this.#host.textInputElement.value = '';
+     }
+     ```
+
+2. **Method: `clear()`**
+   - **Purpose:** Calls `clearInput()`, clears selected IDs, resets the selected person, and dispatches a custom `PersonSelectEvent`.
+   - **Code:**
+     ```typescript
+     public clear() {
+       this.clearInput();
+
+       if (this.selectedIds.size) {
+         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,
+         }),
+       );
+     }
+     ```
+
+3. **Method: `closeClick(e: MouseEvent | KeyboardEvent)`**
+   - **Purpose:** Handles the close icon click event, blurs the input and close icon, closes the dropdown if open, and calls an external close handler if defined.
+   - **Code:**
+     ```typescript
+     public closeClick = (e: MouseEvent | KeyboardEvent): void => {
+       if (e.type === 'keydown') {
+
+         /* only close on enter or space not tab */
+         const me = e as KeyboardEvent;
+         if (me.key !== 'Enter' && me.key !== 'Space') {
+           return;
+         }
+
+         /* blur closeicon if focused */
+         const closeIcon = this.#host.renderRoot.querySelector('.trailing');
+         if (closeIcon) {
+           (closeIcon as HTMLSpanElement).blur();
+         }
+       }
+
+       if (this.#host.textInputElement) {
+         this.#host.textInputElement.blur();
+       }
+
+       /* close dropdown if open */
+       if (this.isOpen) {
+         this.isOpen = false;
+       }
+
+       /* call resolvers handleclick if defined */
+       if (this.#externaCloseHandler) {
+         this.#externaCloseHandler(e);
+       }
+     }
+     ```
diff --git a/packages/person/src/components/select/controller.ts b/packages/person/src/components/select/controller.ts
@@ -55,19 +55,11 @@ export class PersonSelectController implements ReactiveController {
    * Runs on host updated when property is changed
    */
   public attrSelectPerson(select: string | null | undefined) {
-    if (select === undefined) {
-      return;
-    }
-
-    // clear input if null
+    /* Do not trigger task if undefined or null */
     if (!select) {
-      this.clear();
       return;
     }
 
-    /* clear search task when info task is running  */
-    this.#host.search = '';
-
     /* Trigger PersonInfo task with upn or azureId */
     if (select.match('@')) {
       this.#host.upn = select;
@@ -102,7 +94,7 @@ export class PersonSelectController implements ReactiveController {
    */
   private _handleGlobalClick = (e: MouseEvent): void => {
     const t = e.target as HTMLElement;
-    if (t && !(this.#host as unknown as HTMLElement).contains(t)) {
+    if (t && !(this.#host as unknown as HTMLElement).contains(t) && this.isOpen) {
       this.isOpen = false;
     }
   };
@@ -193,8 +185,8 @@ export class PersonSelectController implements ReactiveController {
     /* Dispatch custom select event with our details */
     this.#firePersonSelectEvent(personData);
 
-    /* clear component after selection */
-    if (personData === null || this.#host.selectedPerson === null) {
+    /* clear component if null */
+    if (personData === null) {
       this.clearInput();
     }
   }
@@ -211,7 +203,6 @@ export class PersonSelectController implements ReactiveController {
   }
 
   public clearInput() {
-    this.selectedIds.clear();
     this.#host.value = '';
     this.#host.search = '';
     this.#host.textInputElement.value = '';
@@ -220,6 +211,14 @@ export class PersonSelectController implements ReactiveController {
   public clear() {
     this.clearInput();
 
+    if (this.selectedIds.size) {
+      this.selectedIds.clear();
+    }
+
+    if (this.#host.selectedPerson) {
+      this.#host.selectedPerson = null;
+    }
+
     /* Dispatch custom select event with our details */
     this.#host.dispatchEvent(
       new PersonSelectEvent({
@@ -232,11 +231,12 @@ export class PersonSelectController implements ReactiveController {
   }
 
   /**
-   * Fires on click on close icon in textinput
+   * Fires when triggering close icon in textinput
    * Calls closeHandler callback set in resolver
    */
   public closeClick = (e: MouseEvent | KeyboardEvent): void => {
     if (e.type === 'keydown') {
+
       /* only close on enter or space not tab */
       const me = e as KeyboardEvent;
       if (me.key !== 'Enter' && me.key !== 'Space') {
@@ -254,16 +254,17 @@ export class PersonSelectController implements ReactiveController {
       this.#host.textInputElement.blur();
     }
 
-    /* also close dropdown */
-    this.isOpen = false;
+    /* close dropdown if open */
+    if (this.isOpen) {
+      this.isOpen = false;
+    }
 
     /* call resolvers handleclick if defined */
     if (this.#externaCloseHandler) {
       this.#externaCloseHandler(e);
     }
 
     if (this.selectedIds.size) {
-      // clear input and deselect
       this.clear();
     } else {
       // clear input