better typeahead selection for options with the same starting word

digitalspace · Mar 20, 2024 · 3d8e006 · 3d8e006
1 parent 2884566
commit 3d8e006
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/...ts/ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.ts b/...ts/ngds-forms/src/lib/components/input-types/typeahead-input/typeahead-input.component.ts
@@ -31,12 +31,12 @@ export class NgdsTypeaheadInput extends NgdsInput implements AfterViewInit {
     private renderer: Renderer2
   ) {
     super();
-    // Listen for click events that happen outside of the input. The typeahead text entry should close when the input loses focus, but unfortunately the blur event occurs before any changes are captured, so when selecting from the dropdown, the select is missed if the input closes itself first. 
+    // Listen for click events that happen outside of the input. The typeahead text entry should close when the input loses focus, but unfortunately the blur event occurs before any changes are captured, so when selecting from the dropdown, the select is missed if the input closes itself first.
     this.renderer.listen('window', 'mousedown', (e: Event) => {
       if (!this.inputElement.nativeElement.contains(e.target)) {
         this.preBlurEvent();
       }
-    })
+    });
     if (!this.optionsLimit) {
       this.optionsLimit = this.selectionListItems.length || 20;
     }
@@ -53,11 +53,25 @@ export class NgdsTypeaheadInput extends NgdsInput implements AfterViewInit {
         }
         this.matchInputToControl();
       }
-    }))
+    }));
     this.isOpen.next(false);
+    this.detectDisplayDuplicates();
     this.cd.detectChanges();
   }
 
+  detectDisplayDuplicates() {
+    let flag = false;
+    let items = [...this.selectionListItems];
+    while (!flag && items.length) {
+      const item = items.shift();
+      const match = items.find((e) => e.display === item.display);
+      if (match) {
+        console.warn(`Two or more options in this typeahead share the same display value, which may cause problems when selecting between them. Ensure all options have unique display values.\nDuplicate: ${JSON.stringify(match)}`);
+        return;
+      }
+    }
+  }
+
   // Fires when user clicks outside the input, or when they pick something from the dropdown
   preBlurEvent() {
     if (this.multiselect) {
@@ -100,13 +114,9 @@ export class NgdsTypeaheadInput extends NgdsInput implements AfterViewInit {
     this.editByModel = true;
     let matchList = [];
     for (const item of this.selectionListItems) {
-      matchList.push({ value: item?.value || item, matcher: item?.display || item?.value || item })
+      matchList.push({ value: item?.value || item, matcher: item?.display || item?.value || item });
     }
-    let match = matchList.find((e) => {
-      if (this.currentDisplay?.indexOf(e.matcher) > -1) {
-        return e;
-      }
-    });
+    let match = matchList.find((e) => this.currentDisplay === e.matcher);
     if (match) {
       this.updateValue(match.value);
       this.control.markAsDirty();
@@ -138,7 +148,7 @@ export class NgdsTypeaheadInput extends NgdsInput implements AfterViewInit {
     let display = item.value;
     if (display.toLocaleLowerCase().indexOf(query) > -1) {
       const left_str = display.substring(0, display.toLocaleLowerCase().indexOf(query));
-      const highlight_str = display.substring(display.toLocaleLowerCase().indexOf(query), display.toLocaleLowerCase().indexOf(query) + query.length)
+      const highlight_str = display.substring(display.toLocaleLowerCase().indexOf(query), display.toLocaleLowerCase().indexOf(query) + query.length);
       const right_str = display.substring(display.toLocaleLowerCase().indexOf(query) + query.length);
       return '<div>' + left_str + `<strong>` + highlight_str + '</strong>' + right_str + '</div>';
     }

diff --git a/src/app/home/demonstrator/monitor/monitor.component.ts b/src/app/home/demonstrator/monitor/monitor.component.ts
@@ -34,7 +34,7 @@ export class MonitorComponent {
     if (this.control?.value === '' || this.control?.value?.length === 0) {
       return 'text-primary';
     }
-    if (this.control?.value === null || this.control?.value === undefined || this.control?.value === false || isNaN(this.control?.value)) {
+    if (this.control?.value === null || this.control?.value === undefined || this.control?.value === false || (isNaN(this.control?.value) && typeof this.control?.value === 'number')) {
       return 'text-danger';
     }
     if (this.control?.value === true) {