#378 Autocomplete input value is reset on page scroll (#379)

* define cps menu hide reason * don't clear autocomplete input field on scroll * open options list on finish loading * polish * support divider type * icons changes * extend readme * supported same logic in tree autocomplete * remove unused line
AbsaOSS · May 7, 2024 · 78481d7 · 78481d7
1 parent b6fb38c
commit 78481d7
Show file tree

Hide file tree

Showing 14 changed files with 221 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -75,3 +75,7 @@ Make sure `ng build cps-ui-kit --watch` is running, so the library will be rebui
 - go to `projects/composition/src/app/components/navigation-sidebar.component.ts` file and extend `_components` array (keep alphabetical order!)
 - go to `projects/composition/src/app/app-routing.module.ts` and add a new route for a new page
 - update available components list in `/README.md` (keep alphabetical order!)
+
+#### Generate API documentation
+
+Execute `npm run generate-json-api` to generate documentation for any changes in the components' API.
diff --git a/projects/composition/src/app/api-data/cps-divider.json b/projects/composition/src/app/api-data/cps-divider.json
@@ -21,6 +21,14 @@
                         "default": "...",
                         "description": "Color of the divider."
                     },
+                    {
+                        "name": "type",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "InputSignal<CpsDividerType>",
+                        "default": "...",
+                        "description": "Type of the divider."
+                    },
                     {
                         "name": "thickness",
                         "optional": false,
@@ -32,5 +40,15 @@
                 ]
             }
         }
+    },
+    "types": {
+        "description": "Defines the custom types used by the module.",
+        "values": [
+            {
+                "name": "CpsDividerType",
+                "value": "\"solid\" | \"dashed\" | \"dotted\"",
+                "description": "CpsDividerType is used to define the type of the divider."
+            }
+        ]
     }
 }
diff --git a/projects/composition/src/app/api-data/cps-menu.json b/projects/composition/src/app/api-data/cps-menu.json
@@ -97,7 +97,7 @@
                         "parameters": [
                             {
                                 "name": "value",
-                                "type": "any"
+                                "type": "CpsMenuHideReason"
                             }
                         ],
                         "description": "Callback to invoke when menu is hidden."
@@ -107,7 +107,7 @@
                         "parameters": [
                             {
                                 "name": "value",
-                                "type": "any"
+                                "type": "CpsMenuHideReason"
                             }
                         ],
                         "description": "Callback to invoke before menu is hidden."
@@ -140,5 +140,48 @@
                 "description": "CpsMenuAttachPosition is used to define attachment position of the CpsMenuComponent."
             }
         ]
+    },
+    "enums": {
+        "description": "Defines enums used by the component or service.",
+        "values": [
+            {
+                "name": "CpsMenuHideReason",
+                "description": "An enumeration of the different reasons for hiding the menu.",
+                "values": [
+                    {
+                        "name": "FORCED",
+                        "value": "forced"
+                    },
+                    {
+                        "name": "TOGGLE",
+                        "value": "toggle"
+                    },
+                    {
+                        "name": "CLICK_ITEM",
+                        "value": "click-item"
+                    },
+                    {
+                        "name": "CLICK_OUTSIDE",
+                        "value": "click-outside"
+                    },
+                    {
+                        "name": "KEYDOWN_ESCAPE",
+                        "value": "keydown-escape"
+                    },
+                    {
+                        "name": "SCROLL",
+                        "value": "scroll"
+                    },
+                    {
+                        "name": "RESIZE",
+                        "value": "resize"
+                    },
+                    {
+                        "name": "TARGET_NOT_CONNECTED",
+                        "value": "target-not-connected"
+                    }
+                ]
+            }
+        ]
     }
 }
diff --git a/projects/composition/src/app/api-data/types_map.json b/projects/composition/src/app/api-data/types_map.json
@@ -2,11 +2,13 @@
     "CpsAutocompleteAppearanceType": "autocomplete",
     "CpsButtonToggleOption": "button-toggle",
     "CpsDatepickerAppearanceType": "datepicker",
+    "CpsDividerType": "divider",
     "IconType": "icon",
     "iconSizeType": "icon",
     "CpsInputAppearanceType": "input",
     "CpsMenuItem": "menu",
     "CpsMenuAttachPosition": "menu",
+    "CpsMenuHideReason": "menu",
     "CpsRadioOption": "radio-group",
     "CpsSelectAppearanceType": "select",
     "CpsSidebarMenuItem": "sidebar-menu",

diff --git a/projects/composition/src/app/pages/divider-page/divider-page.component.html b/projects/composition/src/app/pages/divider-page/divider-page.component.html
@@ -13,10 +13,10 @@ <h2 class="section-title">Vertical divider</h2>
     <cps-divider [vertical]="true"></cps-divider>
     <p>Third column</p>
   </div>
-  <h2 class="section-title">Custom thick and red divider</h2>
+  <h2 class="section-title">Dashed, thick and red divider</h2>
   <div>
     <p>First row</p>
-    <cps-divider thickness="4" color="red"></cps-divider>
+    <cps-divider thickness="4" color="red" type="dashed"></cps-divider>
     <p>Second row</p>
   </div>
 </app-component-docs-viewer>
diff --git a/projects/cps-ui-kit/assets/icons.svg b/projects/cps-ui-kit/assets/icons.svg
diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html
@@ -6,7 +6,7 @@
   [ngClass]="{
     disabled: disabled,
     error: error || externalError,
-    active: isOpened
+    active: isActive()
   }"
   #autocompleteContainer>
   <div class="cps-autocomplete-label" *ngIf="label">
@@ -25,7 +25,7 @@
   <div
     (keydown)="onContainerKeyDown($event)"
     class="cps-autocomplete-container"
-    [class.focused]="isOpened"
+    [class.focused]="isActive()"
     [ngClass]="{
       'persistent-clear': persistentClear,
       borderless: appearance === 'borderless',
@@ -47,7 +47,7 @@
           class="cps-autocomplete-box-items"
           *ngIf="
             (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple);
-            else autocompleteInput
+            else autocompleteInputTemplate
           ">
           <span *ngIf="!multiple" class="single-item">
             <div class="single-item-selection">
@@ -59,7 +59,7 @@
             </div>
             <ng-container
               *ngTemplateOutlet="
-                autocompleteInput;
+                autocompleteInputTemplate;
                 context: {
                   inputClass: 'single-item-input',
                   inputStyle: activeSingle ? 'opacity: 1' : null
@@ -81,7 +81,7 @@
             </div>
             <ng-container
               *ngTemplateOutlet="
-                autocompleteInput;
+                autocompleteInputTemplate;
                 context: {
                   inputClass: 'multi-item-input'
                 }
@@ -103,7 +103,7 @@
             </cps-chip>
             <ng-container
               *ngTemplateOutlet="
-                autocompleteInput;
+                autocompleteInputTemplate;
                 context: {
                   inputClass: 'multi-chip-input'
                 }
@@ -142,7 +142,7 @@
     <cps-menu
       #optionsMenu
       [withArrow]="false"
-      (beforeMenuHidden)="onBeforeOptionsHidden()"
+      (beforeMenuHidden)="onBeforeOptionsHidden($event)"
       hideTransitionOptions="0s linear"
       containerClass="cps-autocomplete-options-menu">
       <div
@@ -240,10 +240,11 @@
 </div>
 
 <ng-template
-  #autocompleteInput
+  #autocompleteInputTemplate
   let-inputClass="inputClass"
   let-inputStyle="inputStyle">
   <input
+    #autocompleteInput
     class="cps-autocomplete-box-input"
     spellcheck="false"
     [class]="inputClass"

diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -33,7 +34,10 @@ import {
   VirtualScrollerModule
 } from 'primeng/virtualscroller';
 import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive';
-import { CpsMenuComponent } from '../cps-menu/cps-menu.component';
+import {
+  CpsMenuComponent,
+  CpsMenuHideReason
+} from '../cps-menu/cps-menu.component';
 
 /**
  * CpsAutocompleteAppearanceType is used to define the border of the autocomplete input.
@@ -380,6 +384,9 @@ export class CpsAutocompleteComponent
   @ViewChild('optionsList')
   optionsList!: ElementRef;
 
+  @ViewChild('autocompleteInput')
+  autocompleteInput!: ElementRef;
+
   error = '';
   cvtWidth = '';
   isOpened = false;
@@ -405,6 +412,7 @@ export class CpsAutocompleteComponent
 
   constructor(
     @Self() @Optional() private _control: NgControl,
+    private cdRef: ChangeDetectorRef,
     private _labelByValue: LabelByValuePipe
   ) {
     if (this._control) {
@@ -451,6 +459,15 @@ export class CpsAutocompleteComponent
       this.filteredOptions = this.options;
       this.recalcVirtualListHeight();
     }
+    const loadChanges = changes.loading;
+    if (
+      loadChanges &&
+      !loadChanges.firstChange &&
+      !loadChanges.currentValue &&
+      loadChanges.previousValue
+    ) {
+      this._toggleOptions(true);
+    }
   }
 
   ngAfterViewInit(): void {
@@ -625,6 +642,10 @@ export class CpsAutocompleteComponent
   setDisabledState(disabled: boolean) {}
 
   onBlur() {
+    if (!this.isOpened) {
+      this._closeAndClear();
+    }
+
     this._checkErrors();
     this.blurred.emit();
   }
@@ -634,7 +655,18 @@ export class CpsAutocompleteComponent
     this.focused.emit();
   }
 
-  onBeforeOptionsHidden() {
+  isActive() {
+    return (
+      this.isOpened ||
+      document.activeElement === this.autocompleteInput?.nativeElement
+    );
+  }
+
+  onBeforeOptionsHidden(reason: CpsMenuHideReason) {
+    if ([CpsMenuHideReason.SCROLL, CpsMenuHideReason.RESIZE].includes(reason)) {
+      this._toggleOptions(false);
+      return;
+    }
     this._confirmInput(this.inputText || '', false);
     this._closeAndClear();
     this.onBlur();
@@ -654,12 +686,8 @@ export class CpsAutocompleteComponent
 
   onContainerKeyDown(event: any) {
     const code = event.keyCode;
-    // escape
-    if (code === 27) {
-      this._closeAndClear();
-    }
     // enter
-    else if (code === 13) {
+    if (code === 13) {
       let idx = this.optionHighlightedIndex;
       if (
         this.multiple &&
@@ -795,7 +823,7 @@ export class CpsAutocompleteComponent
   }
 
   private _clickOption(option: any) {
-    this.select(option, false);
+    this.select(option, false, true, this.multiple);
     if (!this.multiple) {
       this._toggleOptions(false);
     }
@@ -927,6 +955,7 @@ export class CpsAutocompleteComponent
     if (!searchVal) {
       if (this.multiple) return;
       this.updateValue(this._getEmptyValue());
+      this.cdRef.detectChanges();
       this._closeAndClear();
       return;
     }
@@ -936,6 +965,7 @@ export class CpsAutocompleteComponent
     );
     if (found) {
       this.select(found, false, true, needFocusInput);
+      this.cdRef.detectChanges();
       this._toggleOptions(this.multiple);
     } else {
       if (!this.multiple) {

diff --git a/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.scss b/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.scss
@@ -1,12 +1,4 @@
 .cps-divider {
   display: block;
   margin: 0;
-
-  &.cps-divider-horizontal {
-    border-top-style: solid;
-  }
-
-  &.cps-divider-vertical {
-    border-right-style: solid;
-  }
 }