3 files modified

kbrilla · Feb 9, 2023 · a8687a5 · a8687a5
1 parent 153db7a
commit a8687a5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/app/components/highlight.directive.ts b/src/app/components/highlight.directive.ts
@@ -54,7 +54,7 @@ export class HighlightDirective implements AfterContentInit, OnDestroy {
 
   rangesRefresh() {
     setTimeout(() => {
-      console.log(this.elementRef.nativeElement, this.#highlight);
+      // console.log(this.elementRef.nativeElement, this.#highlight);
       const textNode = [...this.elementRef.nativeElement.childNodes].find(
         (child) => child.nodeType === Node.TEXT_NODE
       );

diff --git a/src/app/components/select-components/select-components.component.html b/src/app/components/select-components/select-components.component.html
@@ -26,9 +26,9 @@
     autofocus
     slot="listbox"
     behavior="listbox"
-    (popoverhide)="popoverhide($event)"
+    (toggle)="popoverhide($event)"
   >
-    <input type="search" autofocus [(ngModel)]="filter" />
+    <input type="search" [(ngModel)]="filter" />
     <div class="options" tabindex="-1">
       <option
         *ngFor="let option of filtred"

diff --git a/src/app/components/select-components/select-components.component.ts b/src/app/components/select-components/select-components.component.ts
@@ -3,6 +3,11 @@ import { Component, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HighlightDirective } from '../highlight.directive';
 
+interface ToogleEvent extends Event {
+  oldState: 'open' | 'closed';
+  newState: 'open' | 'closed';
+}
+
 @Component({
   standalone: true,
   imports: [CommonModule, FormsModule, HighlightDirective],
@@ -23,7 +28,9 @@ export class SelectComponentsComponent implements OnInit {
   #filter = '';
   set filter(value: string) {
     this.#filter = value;
-    this.filtred = this.options.filter((option) => option.includes(value));
+    this.filtred = this.options.filter((option) =>
+      option.toLowerCase().includes(value.toLowerCase())
+    );
   }
   get filter() {
     return this.#filter;
@@ -45,6 +52,11 @@ export class SelectComponentsComponent implements OnInit {
   }
 
   popoverhide(event: Event) {
-    this.filter = '';
+    const e = event as ToogleEvent;
+    const newStateChanged = e.oldState !== e.newState;
+    console.log(e, newStateChanged, newStateChanged && e.newState);
+    if (newStateChanged && e.newState === 'closed') {
+      this.filter = '';
+    }
   }
 }