Merge pull request #1036 from geonetwork/ME-extend-autocomplete-to-cl…

…ear-input Editor: make use of minCharCount and clearOnSelection of autocomplete component
geonetwork · Dec 12, 2024 · a63d6d0 · a63d6d0
2 parents decc890 + e589636
commit a63d6d0
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/apps/metadata-editor-e2e/src/e2e/edit.cy.ts b/apps/metadata-editor-e2e/src/e2e/edit.cy.ts
@@ -432,7 +432,7 @@ describe('editor form', () => {
             .should('have.length', 0)
           cy.get('gn-ui-form-field-spatial-extent')
             .find('gn-ui-autocomplete')
-            .click()
+            .type('a')
           cy.get('mat-option').eq(1).click()
           cy.editor_publishAndReload()
           cy.get('@saveStatus').should('eq', 'record_up_to_date')
@@ -629,7 +629,9 @@ describe('editor form', () => {
         })
         it('should add a keyword', () => {
           cy.editor_wrapPreviousDraft()
-          cy.get('gn-ui-form-field-keywords').find('gn-ui-autocomplete').click()
+          cy.get('gn-ui-form-field-keywords')
+            .find('gn-ui-autocomplete')
+            .type('a')
           cy.get('mat-option').first().click()
           cy.editor_publishAndReload()
           cy.get('@saveStatus').should('eq', 'record_up_to_date')
@@ -641,6 +643,17 @@ describe('editor form', () => {
             .find('span')
             .should('have.text', 'Addresses ')
         })
+        it('should close the autocomplete and clear the input after selecting a keyword', () => {
+          cy.get('gn-ui-form-field-keywords')
+            .find('gn-ui-autocomplete')
+            .type('a')
+          cy.get('mat-option').first().click()
+          cy.get('mat-option').should('not.exist')
+          cy.get('gn-ui-form-field-keywords')
+            .find('gn-ui-autocomplete')
+            .find('input')
+            .should('have.value', '')
+        })
         it('should delete a keyword', () => {
           cy.editor_wrapPreviousDraft()
           cy.get('gn-ui-form-field-keywords')

diff --git a/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html b/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html
@@ -4,9 +4,10 @@
     [displayWithFn]="displayWithFn"
     [action]="autoCompleteAction"
     (itemSelected)="handleItemSelection($event)"
-    [preventCompleteOnSelection]="true"
-    [minCharacterCount]="0"
+    [preventCompleteOnSelection]="false"
+    [minCharacterCount]="1"
     [allowSubmit]="false"
+    [clearOnSelection]="true"
   ></gn-ui-autocomplete>
   <div class="flex gap-2 flex-wrap">
     <gn-ui-badge

diff --git a/...rm-field/form-field-online-link-resources/form-field-online-link-resources.component.html b/...rm-field/form-field-online-link-resources/form-field-online-link-resources.component.html
@@ -51,7 +51,7 @@ <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
     *ngIf="disabled$ | async"
     class="p-4 text-sm border border-primary bg-primary-lightest rounded-lg"
     translate
-    data-testid="disabled-message"
+    data-test="disabled-message"
   >
     editor.record.form.field.draft.only.disabled
   </div>

diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
@@ -243,6 +243,7 @@ export class AutocompleteComponent
     }
     if (this.clearOnSelection) {
       this.inputRef.nativeElement.value = ''
+      this.control.setValue('')
     }
   }
 }