geonetwork-ui 2.4.0-dev.cd525aa1 → 2.4.0-dev.e8fc61cb

package/src/libs/feature/editor/src/lib/components/record-form/form-field/index.ts

@@ -1,9 +1,12 @@
+export * from './form-field-keywords/form-field-keywords.component'
+export * from './form-field-license/form-field-license.component'
+export * from './form-field-resource-updated/form-field-resource-updated.component'
+export * from './form-field-temporal-extents/form-field-temporal-extents.component'
 export * from './form-field-simple/form-field-simple.component'
 export * from './form-field-file/form-field-file.component'
 export * from './form-field-rich/form-field-rich.component'
 export * from './form-field-object/form-field-object.component'
 export * from './form-field-array/form-field-array.component'
 export * from './form-field-spatial-extent/form-field-spatial-extent.component'
-export * from './form-field-temporal-extent/form-field-temporal-extent.component'
 export * from './form-field.component'
 export * from './form-field.model'

package/src/libs/feature/editor/src/lib/feature-editor.module.ts

@@ -15,6 +15,7 @@ import * as fromEditor from './+state/editor.reducer'
 import { WizardFieldComponent } from './components/wizard-field/wizard-field.component'
 import { WizardSummarizeComponent } from './components/wizard-summarize/wizard-summarize.component'
 import { WizardComponent } from './components/wizard/wizard.component'
+import { Gn4PlatformService } from '../../../../../libs/api/repository/src'
 
 @NgModule({
   declarations: [
@@ -39,7 +40,7 @@ import { WizardComponent } from './components/wizard/wizard.component'
     EffectsModule.forFeature([EditorEffects]),
   ],
   exports: [WizardComponent, WizardSummarizeComponent],
-  providers: [EditorFacade],
+  providers: [EditorFacade, Gn4PlatformService],
 })
 export class FeatureEditorModule {}
 export * from './models/index'

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -54,4 +54,18 @@ export const DEFAULT_FIELDS: EditorFieldsConfig = [
       type: 'text',
     },
   },
+  {
+    model: 'temporalExtents',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.temporalExtents'),
+      type: 'list',
+    },
+  },
+  {
+    model: 'keywords',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.keywords'),
+      type: 'list',
+    },
+  },
 ]

package/src/libs/feature/editor/src/lib/services/editor.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core'
-import { Observable } from 'rxjs'
-import { map } from 'rxjs/operators'
+import { Observable, switchMap } from 'rxjs'
+import { map, tap } from 'rxjs/operators'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { EditorFieldsConfig } from '../models/fields.model'
 import { evaluate } from '../expressions'
@@ -15,7 +15,8 @@ export class EditorService {
   // returns the record as it was when saved, alongside its source
   saveRecord(
     record: CatalogRecord,
-    fieldsConfig: EditorFieldsConfig
+    fieldsConfig: EditorFieldsConfig,
+    generateNewUniqueIdentifier = false
   ): Observable<[CatalogRecord, string]> {
     const savedRecord = { ...record }
 
@@ -29,9 +30,22 @@ export class EditorService {
         })
       }
     }
-    return this.recordsRepository
-      .saveRecord(savedRecord)
-      .pipe(map((recordSource) => [savedRecord, recordSource]))
+
+    // if we want a new unique identifier, clear the existing one
+    if (generateNewUniqueIdentifier) {
+      savedRecord.uniqueIdentifier = null
+    }
+
+    return this.recordsRepository.saveRecord(savedRecord).pipe(
+      switchMap((uniqueIdentifier) =>
+        this.recordsRepository.openRecordForEdition(uniqueIdentifier)
+      ),
+      tap(() => {
+        // if saving was successful, the original draft can be discarded
+        this.recordsRepository.clearRecordDraft(record.uniqueIdentifier)
+      }),
+      map(([record, recordSource]) => [record, recordSource])
+    )
   }
 
   // emits and completes once saving is done

package/src/libs/feature/record/src/lib/feature-record.module.ts

@@ -1,4 +1,4 @@
-import { InjectionToken, NgModule } from '@angular/core'
+import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { UiMapModule } from '../../../../../libs/ui/map/src'
 import { StoreModule } from '@ngrx/store'
@@ -17,7 +17,7 @@ import {
 } from './state/mdview.reducer'
 import { MatTabsModule } from '@angular/material/tabs'
 import { MatIconModule } from '@angular/material/icon'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { PopupAlertComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { ExternalViewerButtonComponent } from './external-viewer-button/external-viewer-button.component'
 import { FeatureCatalogModule } from '../../../../../libs/feature/catalog/src'
@@ -52,6 +52,7 @@ import { DataViewShareComponent } from './data-view-share/data-view-share.compon
     TranslateModule,
     TableComponent,
     FeatureDatavizModule,
+    PopupAlertComponent,
   ],
   providers: [MdViewFacade],
   exports: [

package/src/libs/feature/search/src/index.ts

@@ -21,4 +21,4 @@ export * from './lib/results-hits-number/results-hits.container.component'
 export * from './lib/results-layout/results-layout.component'
 export * from './lib/sort-by/sort-by.component'
 export * from './lib/state/container/search-state.container.directive'
-export * from './lib/results-table/results-table.component'
+export * from './lib/results-table/results-table-container.component'

package/src/libs/feature/search/src/lib/feature-search.module.ts

@@ -14,7 +14,7 @@ import { SearchEffects } from './state/effects'
 import { initialState, reducer, SEARCH_FEATURE_KEY } from './state/reducer'
 import { ResultsHitsContainerComponent } from './results-hits-number/results-hits.container.component'
 import { SearchStateContainerDirective } from './state/container/search-state.container.directive'
-import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import { AutocompleteComponent, UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { NgModule } from '@angular/core'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
 import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.component'
@@ -51,6 +51,7 @@ import { Gn4Repository } from '../../../../../libs/api/repository/src'
     FacetsModule,
     MatIconModule,
     UiWidgetsModule,
+    AutocompleteComponent,
   ],
   exports: [
     SortByComponent,

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts

@@ -11,7 +11,7 @@ import {
   AutocompleteComponent,
   AutocompleteItem,
 } from '../../../../../../libs/ui/inputs/src'
-import { Observable, firstValueFrom } from 'rxjs'
+import { firstValueFrom, Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { SearchFacade } from '../state/search.facade'
 import { SearchService } from '../utils/service/search.service'
@@ -32,7 +32,7 @@ export class FuzzySearchComponent implements OnInit {
   @Output() inputSubmitted = new EventEmitter<string>()
   searchInputValue$: Observable<{ title: string }>
 
-  displayWithFn: (record: CatalogRecord) => string = (record) => record?.title
+  displayWithFn: (record: CatalogRecord) => string = (record) => record.title
 
   autoCompleteAction = (query: string) =>
     this.recordsRepository

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.html

@@ -0,0 +1,9 @@
+<gn-ui-results-table
+  [records]="records$ | async"
+  [recordHasDraft]="hasDraft"
+  [selectedRecordsIdentifiers]="selectedRecords$ | async"
+  [sortOrder]="sortBy$ | async"
+  (recordClick)="handleRecordClick($event)"
+  (recordsSelectedChange)="handleRecordsSelectedChange($event[0], $event[1])"
+  (sortByChange)="handleSortByChange($event[0], $event[1])"
+></gn-ui-results-table>

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.ts

@@ -0,0 +1,49 @@
+import { Component, EventEmitter, Output } from '@angular/core'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { SearchFacade } from '../state/search.facade'
+import { SelectionService } from '../../../../../../libs/api/repository/src'
+import { SearchService } from '../utils/service/search.service'
+import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { ResultsTableComponent } from '../../../../../../libs/ui/search/src'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-results-table-container',
+  templateUrl: './results-table-container.component.html',
+  styleUrls: ['./results-table-container.component.css'],
+  standalone: true,
+  imports: [CommonModule, ResultsTableComponent],
+})
+export class ResultsTableContainerComponent {
+  @Output() recordClick = new EventEmitter<CatalogRecord>()
+
+  records$ = this.searchFacade.results$
+  selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
+  sortBy$ = this.searchFacade.sortBy$
+
+  hasDraft = (record: CatalogRecord): boolean =>
+    this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
+
+  constructor(
+    private searchFacade: SearchFacade,
+    private searchService: SearchService,
+    private selectionService: SelectionService,
+    private recordsRepository: RecordsRepositoryInterface
+  ) {}
+
+  handleRecordClick(item: unknown) {
+    this.recordClick.emit(item as CatalogRecord)
+  }
+
+  handleSortByChange(col: string, order: 'asc' | 'desc') {
+    this.searchService.setSortBy([order, col])
+  }
+
+  handleRecordsSelectedChange(records: CatalogRecord[], selected: boolean) {
+    if (!selected) {
+      this.selectionService.deselectRecords(records)
+    } else {
+      this.selectionService.selectRecords(records)
+    }
+  }
+}

package/src/libs/ui/elements/src/index.ts

@@ -3,6 +3,7 @@ export * from './lib/avatar/avatar.component'
 export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
+export * from './lib/error/error.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
@@ -13,12 +14,12 @@ export * from './lib/metadata-contact/metadata-contact.component'
 export * from './lib/metadata-info/metadata-info.component'
 export * from './lib/metadata-quality-item/metadata-quality-item.component'
 export * from './lib/metadata-quality/metadata-quality.component'
+export * from './lib/notification/notification.component'
 export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/pagination/pagination.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
-export * from './lib/error/error.component'
+export * from './lib/sortable-list/sortable-list.component'
 export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
 export * from './lib/user-preview/user-preview.component'
-export * from './lib/notification/notification.component'

package/src/libs/ui/elements/src/lib/sortable-list/sortable-list.component.css

@@ -0,0 +1,18 @@
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.sortable-list.cdk-drop-list-dragging .sortable-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

package/src/libs/ui/elements/src/lib/sortable-list/sortable-list.component.html

@@ -0,0 +1,36 @@
+<div class="flex gap-2 mb-2">
+  <gn-ui-button
+    *ngFor="let addOption of addOptions"
+    (buttonClick)="add.emit(addOption.eventName)"
+  >
+    <span class="material-symbols-outlined gn-ui-icon-small"> add </span>
+    &nbsp;{{ addOption.buttonLabel }}</gn-ui-button
+  >
+</div>
+<div
+  cdkDropList
+  class="sortable-list flex flex-col gap-3 p-2"
+  (cdkDropListDropped)="drop($event)"
+>
+  <ng-container *ngFor="let element of elements; index as index">
+    <div class="sortable-box bg-white flex items-center" cdkDrag>
+      <span
+        cdkDragHandle
+        class="material-symbols-outlined mx-[10px] cursor-grab gn-ui-icon-medium flex-none"
+      >
+        drag_handle
+      </span>
+      <div class="flex-1">
+        <ng-container
+          *ngComponentOutlet="element.component; inputs: element.inputs"
+        ></ng-container>
+      </div>
+      <span
+        (click)="removeElement(index)"
+        class="material-symbols-outlined mx-[10px] cursor-pointer gn-ui-icon-medium flex-none"
+      >
+        close
+      </span>
+    </div>
+  </ng-container>
+</div>

package/src/libs/ui/elements/src/lib/sortable-list/sortable-list.component.ts

@@ -0,0 +1,56 @@
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDragHandle,
+  CdkDropList,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop'
+import { NgComponentOutlet, NgFor } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  Type,
+} from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+type DynamicElement = {
+  component: Type<any>
+  inputs: Record<string, any>
+}
+
+@Component({
+  selector: 'gn-ui-sortable-list',
+  templateUrl: 'sortable-list.component.html',
+  styleUrls: ['sortable-list.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    NgFor,
+    NgComponentOutlet,
+    CdkDropList,
+    CdkDrag,
+    CdkDragHandle,
+    MatIconModule,
+    ButtonComponent,
+  ],
+})
+export class SortableListComponent {
+  @Input() elements: Array<DynamicElement>
+  @Input() addOptions: Array<{ buttonLabel: string; eventName: string }>
+  @Output() elementsChange = new EventEmitter<Array<DynamicElement>>()
+  @Output() add = new EventEmitter<string>()
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.elements, event.previousIndex, event.currentIndex)
+    this.elementsChange.emit(this.elements)
+  }
+
+  removeElement(index: number) {
+    this.elements = this.elements.filter((_, i) => i !== index)
+    this.elementsChange.emit(this.elements)
+  }
+}

package/src/libs/ui/elements/src/lib/ui-elements.module.ts

@@ -9,7 +9,7 @@ import { ContentGhostComponent } from './content-ghost/content-ghost.component'
 import { DownloadItemComponent } from './download-item/download-item.component'
 import { DownloadsListComponent } from './downloads-list/downloads-list.component'
 import { ApiCardComponent } from './api-card/api-card.component'
-import { BadgeComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { RelatedRecordCardComponent } from './related-record-card/related-record-card.component'
@@ -20,7 +20,7 @@ import { MetadataQualityItemComponent } from './metadata-quality-item/metadata-q
 import { ErrorComponent } from './error/error.component'
 import { PaginationComponent } from './pagination/pagination.component'
 import { ThumbnailComponent } from './thumbnail/thumbnail.component'
-import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import { BadgeComponent, UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { FormsModule } from '@angular/forms'
 import { AvatarComponent } from './avatar/avatar.component'
 import { UserPreviewComponent } from './user-preview/user-preview.component'

package/src/libs/ui/inputs/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/autocomplete/autocomplete.component'
+export * from './lib/badge/badge.component'
 export * from './lib/button/button.component'
 export * from './lib/check-toggle/check-toggle.component'
 export * from './lib/checkbox/checkbox.component'

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css

@@ -3,7 +3,6 @@
 }
 .clear-btn {
   width: var(--input-height);
-  right: var(--input-height);
   height: 100%;
 }
 .search-btn {

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html

@@ -8,23 +8,27 @@
     [matAutocomplete]="auto"
     (keyup.enter)="handleEnter(searchInput.value)"
   />
-  <button
-    type="button"
-    class="text-primary-lightest hover:text-primary hover:bg-gray-50 absolute transition-all duration-100 clear-btn inset-y-0"
-    *ngIf="searchInput.value"
-    aria-label="Clear"
-    (click)="clear()"
-  >
-    <mat-icon class="material-symbols-outlined">close</mat-icon>
-  </button>
-  <button
-    type="button"
-    class="text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 absolute transition-all duration-100 search-btn rounded-r inset-y-0 right-0"
-    aria-label="Trigger search"
-    (click)="handleClickSearch()"
-  >
-    <mat-icon class="material-symbols-outlined">search</mat-icon>
-  </button>
+  <div class="flex flex-row absolute inset-y-0 right-0">
+    <button
+      type="button"
+      class="text-primary-lightest hover:text-primary hover:bg-gray-50 transition-all duration-100 clear-btn"
+      *ngIf="searchInput.value"
+      aria-label="Clear"
+      (click)="clear()"
+    >
+      <mat-icon class="material-symbols-outlined">close</mat-icon>
+    </button>
+    <button
+      type="button"
+      class="text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 transition-all duration-100 search-btn rounded-r"
+      aria-label="Trigger search"
+      *ngIf="allowSubmit"
+      data-test="autocomplete-submit-btn"
+      (click)="handleClickSearch()"
+    >
+      <mat-icon class="material-symbols-outlined">search</mat-icon>
+    </button>
+  </div>
   <gn-ui-popup-alert
     *ngIf="error"
     class="absolute mt-2 w-full top-[100%] left-0"
@@ -39,13 +43,13 @@
 <mat-autocomplete
   #auto="matAutocomplete"
   (optionSelected)="handleSelection($event)"
-  [displayWith]="displayWithFn"
+  [displayWith]="displayWithFnInternal"
 >
   <mat-option
     *ngFor="let suggestion of suggestions$ | async"
     [value]="suggestion"
     class="p-2 suggestion"
   >
-    {{ displayWithFn(suggestion) }}
+    {{ displayWithFnInternal(suggestion) }}
   </mat-option>
 </mat-autocomplete>

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts

@@ -13,25 +13,29 @@ import {
   SimpleChanges,
   ViewChild,
 } from '@angular/core'
-import { UntypedFormControl } from '@angular/forms'
+import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms'
 import {
   MatAutocomplete,
+  MatAutocompleteModule,
   MatAutocompleteSelectedEvent,
   MatAutocompleteTrigger,
 } from '@angular/material/autocomplete'
-import { merge, Observable, of, ReplaySubject, Subscription } from 'rxjs'
+import { first, merge, Observable, of, ReplaySubject, Subscription } from 'rxjs'
 import {
   catchError,
   debounceTime,
   distinctUntilChanged,
   filter,
   finalize,
-  first,
   map,
   switchMap,
   take,
   tap,
 } from 'rxjs/operators'
+import { MatIconModule } from '@angular/material/icon'
+import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 export type AutocompleteItem = unknown
 
@@ -40,6 +44,15 @@ export type AutocompleteItem = unknown
   templateUrl: './autocomplete.component.html',
   styleUrls: ['./autocomplete.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatIconModule,
+    PopupAlertComponent,
+    MatAutocompleteModule,
+    CommonModule,
+    TranslateModule,
+    ReactiveFormsModule,
+  ],
 })
 export class AutocompleteComponent
   implements OnInit, AfterViewInit, OnDestroy, OnChanges
@@ -49,6 +62,8 @@ export class AutocompleteComponent
   @Input() value?: AutocompleteItem
   @Input() clearOnSelection = false
   @Input() autoFocus = false
+  @Input() minCharacterCount? = 3
+  @Input() allowSubmit = true
   @Output() itemSelected = new EventEmitter<AutocompleteItem>()
   @Output() inputSubmitted = new EventEmitter<string>()
   @Output() inputCleared = new EventEmitter<void>()
@@ -57,22 +72,28 @@ export class AutocompleteComponent
   @ViewChild('searchInput') inputRef: ElementRef<HTMLInputElement>
 
   searching: boolean
-  suggestions$: Observable<AutocompleteItem[]>
   control = new UntypedFormControl()
-  subscription = new Subscription()
   cancelEnter = true
   selectionSubject = new ReplaySubject<MatAutocompleteSelectedEvent>(1)
   lastInputValue$ = new ReplaySubject<string>(1)
   error: string | null = null
+  suggestions$: Observable<AutocompleteItem[]>
+  subscription = new Subscription()
 
-  @Input() displayWithFn: (AutocompleteItem) => string = (item) => item
+  @Input() displayWithFn: (item: AutocompleteItem) => string = (item) =>
+    item.toString()
+
+  displayWithFnInternal = (item?: AutocompleteItem) => {
+    if (item === null || item === undefined) return null
+    return this.displayWithFn(item)
+  }
 
   constructor(private cdRef: ChangeDetectorRef) {}
   ngOnChanges(changes: SimpleChanges): void {
     const { value } = changes
     if (value) {
-      const previousTextValue = this.displayWithFn(value.previousValue)
-      const currentTextValue = this.displayWithFn(value.currentValue)
+      const previousTextValue = this.displayWithFnInternal(value.previousValue)
+      const currentTextValue = this.displayWithFnInternal(value.currentValue)
       if (previousTextValue !== currentTextValue) {
         this.updateInputValue(value.currentValue)
       }
@@ -80,20 +101,33 @@ export class AutocompleteComponent
   }
 
   ngOnInit(): void {
-    this.suggestions$ = merge(
+    const newValue$ = merge(
+      of(''),
+      this.inputCleared.pipe(map(() => '')),
       this.control.valueChanges.pipe(
         filter((value) => typeof value === 'string'),
-        filter((value: string) => value.length > 2),
-        debounceTime(400),
         distinctUntilChanged(),
-        tap(() => (this.searching = true))
-      ),
-      this.control.valueChanges.pipe(
-        filter((value) => typeof value === 'object' && value.title),
-        map((item) => item.title)
+        debounceTime(400)
       )
+    )
+
+    const externalValueChange$ = this.control.valueChanges.pipe(
+      filter((value) => typeof value === 'object' && value.title),
+      map((item) => item.title)
+    )
+
+    // this observable emits arrays of suggestions loaded using the given action
+    const suggestionsFromAction = merge(
+      newValue$.pipe(
+        filter((value: string) => value.length >= this.minCharacterCount)
+      ),
+      externalValueChange$
     ).pipe(
-      switchMap((value) => (value ? this.action(value) : of([]))),
+      tap(() => {
+        this.searching = true
+        this.error = null
+      }),
+      switchMap((value) => this.action(value)),
       catchError((error: Error) => {
         this.error = error.message
         return of([])
@@ -101,11 +135,32 @@ export class AutocompleteComponent
       finalize(() => (this.searching = false))
     )
 
-    this.subscription = this.control.valueChanges.subscribe((any) => {
-      if (any !== '') {
-        this.cancelEnter = false
-      }
-    })
+    this.suggestions$ = merge(
+      suggestionsFromAction,
+      // if a new value is under the min char count, clear suggestions
+      newValue$.pipe(
+        filter((value: string) => value.length < this.minCharacterCount),
+        map(() => [])
+      )
+    )
+
+    // close the panel whenever suggestions are cleared
+    this.subscription.add(
+      this.suggestions$
+        .pipe(filter((suggestions) => suggestions.length === 0))
+        .subscribe(() => {
+          this.triggerRef?.closePanel()
+        })
+    )
+
+    this.subscription.add(
+      this.control.valueChanges.subscribe((any) => {
+        if (any !== '') {
+          this.cancelEnter = false
+        }
+      })
+    )
+
     this.control.valueChanges
       .pipe(filter((value) => typeof value === 'string'))
       .subscribe(this.lastInputValue$)
@@ -120,7 +175,7 @@ export class AutocompleteComponent
   }
 
   ngOnDestroy(): void {
-    this.subscription.unsubscribe()
+    this.subscription?.unsubscribe()
   }
 
   updateInputValue(value: AutocompleteItem) {
@@ -139,19 +194,16 @@ export class AutocompleteComponent
       .pipe(take(1))
       .subscribe((selection) => selection && selection.option.deselect())
     this.inputRef.nativeElement.focus()
-    this.triggerRef.closePanel()
   }
 
   handleEnter(any: string) {
-    if (!this.cancelEnter) {
+    if (!this.cancelEnter && this.allowSubmit) {
       this.inputSubmitted.emit(any)
-      this.triggerRef.closePanel()
     }
   }
 
   handleClickSearch() {
     this.inputSubmitted.emit(this.inputRef.nativeElement.value)
-    this.triggerRef.closePanel()
   }
 
   handleSelection(event: MatAutocompleteSelectedEvent) {