diff --git a/apps/metadata-editor-e2e/src/e2e/edit.cy.ts b/apps/metadata-editor-e2e/src/e2e/edit.cy.ts index 3fd0fd98a..0ed6eeaa4 100644 --- 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 index b7bf99890..260a1418b 100644 --- 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" >
*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
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts index 62b9f047c..bf81d7278 100644 --- 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('') } } }