geonetwork-ui 2.4.0-dev.6c8dcba0 → 2.4.0-dev.71a43b38

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html

@@ -1,14 +1,14 @@
 <a href (click)="clickOrganisation($event)" [attr.href]="organisationUrl">
   <div
     class="group cursor-pointer rounded-lg h-full flex flex-col"
-    [title]="organisation.name"
+    [title]="organization.name"
   >
     <div
       class="shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36"
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
-        [thumbnailUrl]="organisation.logoUrl"
+        [thumbnailUrl]="organization.logoUrl"
         [fit]="'contain'"
       >
       </gn-ui-thumbnail>
@@ -18,22 +18,24 @@
         class="shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors"
         data-cy="organizationName"
       >
-        {{ organisation.name }}</span
+        {{ organization.name }}</span
       >
       <p
         class="abstract mt-4 mb-5 sm:mb-2 sm:mt-0 grow shrink-1 overflow-hidden"
         data-cy="organizationDesc"
       >
-        {{ organisation.description }}
+        {{ organization.description }}
       </p>
       <div class="shrink-0 text-primary opacity-50 flex leading-6">
         <mat-icon class="material-symbols-outlined text-primary opacity-50 mr-1"
           >folder_open
         </mat-icon>
         <span class="mx-1" data-cy="organizationRecordsCount">{{
-          organisation.recordCount
+          organization.recordCount
         }}</span>
-        <span translate>record.metadata.publications</span>
+        <span translate [translateParams]="{ count: organization.recordCount }"
+          >record.metadata.publications</span
+        >
       </div>
     </div>
   </div>

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts

@@ -14,12 +14,12 @@ import { Organization } from '../../../../../../libs/common/domain/src/lib/model
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OrganisationPreviewComponent {
-  @Input() organisation: Organization
+  @Input() organization: Organization
   @Input() organisationUrl: string
   @Output() clickedOrganisation = new EventEmitter<Organization>()
 
   clickOrganisation(event: Event) {
     event.preventDefault()
-    this.clickedOrganisation.emit(this.organisation)
+    this.clickedOrganisation.emit(this.organization)
   }
 }

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

@@ -9,6 +9,7 @@ import { OrganisationsFilterComponent } from './organisations-filter/organisatio
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { LanguageSwitcherComponent } from './language-switcher/language-switcher.component'
 import { OrganisationsResultComponent } from './organisations-result/organisations-result.component'
+import { RouterLink } from '@angular/router'
 
 @NgModule({
   declarations: [
@@ -24,6 +25,7 @@ import { OrganisationsResultComponent } from './organisations-result/organisatio
     UiElementsModule,
     UiInputsModule,
     MatIconModule,
+    RouterLink,
   ],
   exports: [
     CatalogTitleComponent,

package/src/libs/ui/dataviz/src/lib/figure/figure.component.html

@@ -1,7 +1,13 @@
 <div
-  translate
   class="flex flex-row justify-start items-center overflow-hidden"
-  [title]="hoverTitle"
+  data-test="figureTitle"
+  [title]="
+    figure.toString() +
+    ' ' +
+    unit +
+    ' ' +
+    (title | translate: { count: figure })
+  "
 >
   <mat-icon
     class="material-symbols-outlined {{ bgClass }} {{
@@ -13,7 +19,9 @@
   </mat-icon>
   <div class="shrink overflow-hidden">
     <div class="figure-block text-[1.5em] text-black">
-      <span class="figure font-medium mr-[0.3em]">{{ figure }}</span>
+      <span class="figure font-medium mr-[0.3em]" data-test="figure">{{
+        figure
+      }}</span>
       <span class="unit text-[0.665em]">{{ unit }}</span>
     </div>
     <div translate class="title truncate" [translateParams]="{ count: figure }">

package/src/libs/ui/dataviz/src/lib/figure/figure.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 
 @Component({
   selector: 'gn-ui-figure',
@@ -10,17 +10,13 @@ export class FigureComponent {
   @Input() icon!: string
   @Input() title!: string
   @Input() figure!: string | number
-  @Input() unit?: string
+  @Input() unit = ''
   @Input() color: 'primary' | 'secondary' = 'primary'
 
-  get hoverTitle() {
-    return `${this.figure.toString()} ${this.unit || ''}
-${this.title}`
-  }
-
   get textClass() {
     return this.color === 'primary' ? 'text-primary' : 'text-secondary'
   }
+
   get bgClass() {
     return this.color === 'primary' ? 'bg-primary-white' : 'bg-secondary-white'
   }

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

@@ -8,7 +8,6 @@ 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'
 export * from './lib/markdown-parser/markdown-parser.component'
-export * from './lib/max-lines/max-lines.component'
 export * from './lib/metadata-catalog/metadata-catalog.component'
 export * from './lib/metadata-contact/metadata-contact.component'
 export * from './lib/metadata-info/metadata-info.component'

package/src/libs/ui/elements/src/lib/api-card/api-card.component.html

@@ -1,7 +1,5 @@
 <div
-  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden"
-  [ngClass]="{ 'cursor-pointer': displayApiFormButton }"
-  (click)="openRecordApiFormPanel()"
+  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden cursor-default"
 >
   <div
     class="font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]"
@@ -17,35 +15,37 @@
         }"
         >{{ link.accessServiceProtocol }}</span
       >
-      <gn-ui-copy-text-button
-        *ngIf="!displayApiFormButton"
-        [text]="link.url.toString()"
-        [tooltipText]="'tooltip.url.copy' | translate"
-        [displayText]="false"
-      ></gn-ui-copy-text-button>
-      <button
-        *ngIf="displayApiFormButton"
-        type="button"
-        [ngClass]="{
-          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
-            displayText
-        }"
-        mat-raised-button
-        [matTooltip]="
-          !currentlyActive
-            ? ('record.metadata.api.form.openForm' | translate)
-            : ('record.metadata.api.form.closeForm' | translate)
-        "
-        matTooltipPosition="above"
-      >
-        <mat-icon
-          class="material-symbols-outlined pointer-events-none align-middle card-icon"
+      <div class="flex flex-row gap-2 items-center">
+        <gn-ui-copy-text-button
+          [text]="link.url"
+          [tooltipText]="'tooltip.url.copy' | translate"
+          [displayText]="false"
+        ></gn-ui-copy-text-button>
+        <button
+          *ngIf="displayApiFormButton"
+          type="button"
           [ngClass]="{
-            'text-secondary opacity-100': currentlyActive
+            'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
+              displayText
           }"
-          >more_horiz</mat-icon
+          mat-raised-button
+          [matTooltip]="
+            !currentlyActive
+              ? ('record.metadata.api.form.openForm' | translate)
+              : ('record.metadata.api.form.closeForm' | translate)
+          "
+          matTooltipPosition="above"
+          (click)="openRecordApiFormPanel()"
         >
-      </button>
+          <mat-icon
+            class="material-symbols-outlined pointer-events-none align-middle card-icon"
+            [ngClass]="{
+              'text-secondary opacity-100': currentlyActive
+            }"
+            >more_horiz</mat-icon
+          >
+        </button>
+      </div>
     </div>
   </div>
 </div>

package/src/libs/ui/elements/src/lib/error/error.component.html

@@ -8,11 +8,11 @@
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined face">face</mat-icon>
       <mat-icon class="material-symbols-outlined question-mark1"
-        >question_mark</mat-icon
-      >
+        >question_mark
+      </mat-icon>
       <mat-icon class="material-symbols-outlined question-mark2"
-        >question_mark</mat-icon
-      >
+        >question_mark
+      </mat-icon>
     </div>
     <div translate>search.error.couldNotReachApi</div>
   </div>
@@ -32,6 +32,15 @@
     <div translate>search.error.receivedError</div>
     <div *ngIf="error">{{ error }}</div>
   </div>
+  <div *ngIf="type === types.ORGANIZATION_HAS_NO_DATASET">
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
+      <mat-icon class="material-symbols-outlined computer-question-mark"
+        >question_mark
+      </mat-icon>
+    </div>
+    <div translate>search.error.organizationHasNoDataset</div>
+  </div>
   <div
     *ngIf="type === types.RECORD_NOT_FOUND"
     data-test="record-not-found-error"
@@ -39,12 +48,27 @@
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
       <mat-icon class="material-symbols-outlined computer-question-mark"
-        >question_mark</mat-icon
-      >
+        >question_mark
+      </mat-icon>
     </div>
     <div translate [translateParams]="{ id: recordId }">
       search.error.recordNotFound
     </div>
     <div *ngIf="error">{{ error }}</div>
   </div>
+  <div
+    *ngIf="type === types.ORGANIZATION_NOT_FOUND"
+    data-test="org-not-found-error"
+  >
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
+      <mat-icon class="material-symbols-outlined computer-question-mark"
+        >question_mark
+      </mat-icon>
+    </div>
+    <div translate [translateParams]="{ id: recordId }">
+      search.error.organizationNotFound
+    </div>
+    <div *ngIf="error">{{ error }}</div>
+  </div>
 </div>

package/src/libs/ui/elements/src/lib/error/error.component.ts

@@ -5,6 +5,8 @@ export enum ErrorType {
   RECEIVED_ERROR,
   RECORD_NOT_FOUND,
   DATASET_HAS_NO_LINK,
+  ORGANIZATION_HAS_NO_DATASET,
+  ORGANIZATION_NOT_FOUND,
 }
 
 @Component({

package/src/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html

@@ -1,5 +1,5 @@
 <a
-  class="w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]"
+  [class]="classList"
   [routerLink]="['/dataset', record.uniqueIdentifier]"
   target="_blank"
 >

package/src/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
@@ -8,5 +8,26 @@ import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/mode
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RelatedRecordCardComponent {
+  private readonly baseClasses: string
+
   @Input() record: CatalogRecord
+  @Input() extraClass = ''
+
+  constructor() {
+    this.baseClasses = [
+      'w-72',
+      'h-96',
+      'overflow-hidden',
+      'rounded-lg',
+      'bg-white',
+      'cursor-pointer',
+      'block',
+      'hover:-translate-y-2 ',
+      'duration-[180ms]',
+    ].join(' ')
+  }
+
+  get classList() {
+    return `${this.baseClasses} ${this.extraClass}`
+  }
 }

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

@@ -9,8 +9,8 @@ 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 { UiLayoutModule } from '../../../../../libs/ui/layout/src'
+import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { MaxLinesComponent, UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { RelatedRecordCardComponent } from './related-record-card/related-record-card.component'
 import { MetadataContactComponent } from './metadata-contact/metadata-contact.component'
@@ -20,13 +20,12 @@ 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'
 import { GnUiLinkifyDirective } from './metadata-info/linkify.directive'
 import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component'
-import { MaxLinesComponent } from './max-lines/max-lines.component'
 import { RecordApiFormComponent } from './record-api-form/record-api-form.component'
 import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
 import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-overlay-preview.component'
@@ -50,6 +49,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     ThumbnailComponent,
     TimeSincePipe,
     BadgeComponent,
+    MaxLinesComponent,
   ],
   declarations: [
     MetadataInfoComponent,
@@ -68,7 +68,6 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     UserPreviewComponent,
     GnUiLinkifyDirective,
     PaginationButtonsComponent,
-    MaxLinesComponent,
     RecordApiFormComponent,
     UserFeedbackItemComponent,
     ImageOverlayPreviewComponent,
@@ -90,7 +89,6 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     AvatarComponent,
     UserPreviewComponent,
     PaginationButtonsComponent,
-    MaxLinesComponent,
     RecordApiFormComponent,
     MarkdownParserComponent,
     UserFeedbackItemComponent,

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) {