fix: optimization tags input

.changeset/happy-planets-yell.md

@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+fix: optimize tags input

src/input/tags-input/mixin.scss

@@ -5,7 +5,8 @@
 
 @mixin component-style($block) {
   .#{$block} {
-    display: inline-block;
+    display: flex;
+    flex-wrap: wrap;
     position: relative;
     width: 100%;
     color: use-text-color(main);
@@ -115,6 +116,7 @@
     }
 
     .aui-tag#{&}__input {
+      flex: 1 0 auto;
       margin-right: 0;
       padding: 0;
       width: 1em;

src/input/tags-input/tags-input-form.component.spec.ts

@@ -0,0 +1,232 @@
+import { Component } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing';
+import {
+  ReactiveFormsModule,
+  FormControl,
+  Validators,
+  FormGroup,
+  ValidatorFn,
+  AbstractControl,
+  AsyncValidatorFn,
+} from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { TagsInputComponent } from './tags-input.component';
+import { of } from 'rxjs';
+
+describe('TagsInputComponent Required Validation Behavior', () => {
+  let fixture: ComponentFixture<TestFormComponent>;
+  let testHost: TestFormComponent;
+  let inputEl: HTMLInputElement;
+  let tagComp: TagsInputComponent;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestFormComponent);
+    fixture.detectChanges();
+    tagComp = fixture.debugElement.query(
+      By.directive(TagsInputComponent),
+    ).componentInstance;
+    testHost = fixture.componentInstance;
+    const el = fixture.debugElement.query(
+      By.css('.aui-tags-input'),
+    ).nativeElement;
+    inputEl = el.querySelector('input');
+  });
+
+  // it('should mark form valid when input has value but tag is not confirmed yet', fakeAsync(() => {
+  //   expect(testHost.form.valid).toBeFalsy();
+
+  //   inputEl.value = 'hello';
+  //   inputEl.dispatchEvent(new Event('input'));
+  //   fixture.detectChanges();
+  //   tick();
+  //   fixture.detectChanges();
+
+  //   expect(testHost.form.valid).toBeTruthy();
+
+  //   inputEl.dispatchEvent(new Event('blur'));
+  //   fixture.detectChanges();
+  //   tick();
+  //   fixture.detectChanges();
+
+  //   expect(testHost.form.valid).toBeTruthy();
+  //   expect(testHost.form.get('tags')!.value).toEqual(['hello']);
+  // }));
+
+  describe('allowRepeat Behavior', () => {
+    it('should NOT allow duplicate tags when allowRepeat = false', fakeAsync(() => {
+      testHost.allowRepeat = false;
+      fixture.detectChanges();
+
+      inputEl.value = 'a';
+      inputEl.dispatchEvent(new Event('input'));
+      inputEl.dispatchEvent(new Event('blur'));
+      tick();
+      fixture.detectChanges();
+
+      inputEl.value = 'a';
+      inputEl.dispatchEvent(new Event('input'));
+      inputEl.dispatchEvent(new Event('blur'));
+      tick();
+      fixture.detectChanges();
+
+      expect(testHost.form.get('tags')!.value).toEqual(['a']);
+    }));
+
+    it('should allow duplicate tags when allowRepeat = true', fakeAsync(() => {
+      testHost.allowRepeat = true;
+      fixture.detectChanges();
+
+      inputEl.value = 'a';
+      inputEl.dispatchEvent(new Event('input'));
+      inputEl.dispatchEvent(new Event('blur'));
+      tick();
+      fixture.detectChanges();
+
+      inputEl.value = 'a';
+      inputEl.dispatchEvent(new Event('input'));
+      inputEl.dispatchEvent(new Event('blur'));
+      tick();
+      fixture.detectChanges();
+
+      expect(testHost.form.get('tags')!.value).toEqual(['a', 'a']);
+    }));
+  });
+
+  describe('allowEmpty Behavior', () => {
+    it('should NOT add empty tag when allowEmpty = false', fakeAsync(() => {
+      testHost.allowEmpty = false;
+      fixture.detectChanges();
+
+      inputEl.value = '';
+      inputEl.dispatchEvent(new Event('input'));
+      inputEl.dispatchEvent(new Event('blur'));
+      tick();
+      fixture.detectChanges();
+
+      expect(testHost.form.get('tags')!.value).toEqual([]);
+    }));
+
+    it('should add empty tag when allowEmpty = true', fakeAsync(() => {
+      testHost.allowEmpty = true;
+      fixture.detectChanges();
+
+      inputEl.value = '';
+      inputEl.dispatchEvent(new Event('input'));
+      inputEl.dispatchEvent(new Event('blur'));
+      tick();
+      fixture.detectChanges();
+
+      expect(testHost.form.get('tags')!.value).toEqual(['']);
+    }));
+  });
+
+  describe('inputValidator behavior', () => {
+    it('should NOT add tag when input does NOT pass inputValidator', fakeAsync(() => {
+      testHost.checkFn = control => {
+        const value = control.value as string[];
+        if (value.includes('a')) {
+          return { patternB: true };
+        }
+        return null;
+      };
+      fixture.detectChanges();
+
+      inputEl.value = 'apple';
+      inputEl.dispatchEvent(new Event('input'));
+      inputEl.dispatchEvent(new Event('blur'));
+      tick(0);
+      fixture.detectChanges();
+
+      expect(tagComp.model).toEqual([]);
+      expect(testHost.form.get('tags')!.value).toEqual([]);
+      expect(testHost.form.valid).toBeFalsy();
+    }));
+
+    it('should add tag when input passes inputValidator', fakeAsync(() => {
+      testHost.checkFn = control => {
+        const value = control.value as string[];
+        if (value.includes('a')) {
+          return { patternB: true };
+        }
+        return null;
+      };
+      inputEl.value = 'ccc';
+      inputEl.dispatchEvent(new Event('input'));
+      inputEl.dispatchEvent(new Event('blur'));
+      tick(0);
+      fixture.detectChanges();
+
+      expect(tagComp.model).toEqual(['ccc']);
+      expect(testHost.form.get('tags')!.value).toEqual(['ccc']);
+      expect(testHost.form.valid).toBeTruthy();
+    }));
+  });
+
+  describe('inputAsyncValidator behavior', () => {
+    it('should block adding tag when async validator resolves to false', fakeAsync(() => {
+      testHost.inputAsyncValidator = (_control: AbstractControl) =>
+        of({ tagAsyncInvalid: true });
+      fixture.detectChanges();
+
+      inputEl.value = 'bad';
+      inputEl.dispatchEvent(new Event('input'));
+      inputEl.dispatchEvent(new Event('blur'));
+
+      tick();
+      fixture.detectChanges();
+
+      expect(testHost.form.get('tags')!.value).toEqual([]);
+    }));
+
+    it('should allow adding tag when async validator resolves to true', fakeAsync(() => {
+      testHost.inputAsyncValidator = (_control: AbstractControl) =>
+        Promise.resolve(null);
+      fixture.detectChanges();
+
+      inputEl.value = 'hello';
+      inputEl.dispatchEvent(new Event('input'));
+      inputEl.dispatchEvent(new Event('blur'));
+
+      tick();
+      fixture.detectChanges();
+
+      expect(testHost.form.get('tags')!.value).toEqual(['hello']);
+    }));
+  });
+});
+
+@Component({
+  template: `
+    <form [formGroup]="form">
+      <aui-tags-input
+        required
+        formControlName="tags"
+        [allowRepeat]="allowRepeat"
+        [allowEmpty]="allowEmpty"
+        [inputValidator]="checkFn"
+        [inputAsyncValidator]="inputAsyncValidator"
+      ></aui-tags-input>
+    </form>
+  `,
+  imports: [ReactiveFormsModule, TagsInputComponent],
+})
+class TestFormComponent {
+  allowRepeat = false;
+  allowEmpty = false;
+
+  inputAsyncValidator: AsyncValidatorFn = (_control: AbstractControl) =>
+    Promise.resolve(null);
+
+  checkFn: ValidatorFn = () => {
+    return null;
+  };
+
+  form = new FormGroup({
+    tags: new FormControl<string[]>([], Validators.required),
+  });
+}

src/input/tags-input/tags-input.component.html

@@ -1,6 +1,5 @@
 <div
   [class]="rootClass"
-  (mousedown)="$event.preventDefault()"
   (click)="inputRef.focus()"
   [style.max-height]="maxHeight"
 >

stories/input/tags-input.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormControl, ValidatorFn } from '@angular/forms';
+import { FormControl, ValidatorFn, Validators } from '@angular/forms';
 
 import { ComponentSize } from '@alauda/ui';
 
@@ -9,7 +9,6 @@ import { ComponentSize } from '@alauda/ui';
     <aui-tags-input
       [size]="size"
       [formControl]="control"
-      [inputValidator]="checkFn"
       [clearable]="true"
       [allowRepeat]="allowRepeat"
       [allowEmpty]="allowEmpty"
@@ -33,12 +32,35 @@ import { ComponentSize } from '@alauda/ui';
       [allowEmpty]="allowEmpty"
       placeholder="placeholder"
     ></aui-tags-input>
+    <br />
+    <br />
+
+    <div>多行 tags maxRowCount: {{ maxRowCount }}</div>
+    <aui-tags-input
+      style="width: 400px;"
+      [size]="size"
+      [formControl]="rowsControl"
+      [inputValidator]="checkFn"
+      [maxRowCount]="maxRowCount"
+      [clearable]="true"
+      [readonlyTags]="['service']"
+      [allowRepeat]="allowRepeat"
+      [allowEmpty]="allowEmpty"
+      placeholder="placeholder"
+    ></aui-tags-input>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })
 export class TagsInputComponent {
   value = ['app', 'service'];
+  rowsValue = [
+    'app123456789123456789123456789',
+    'service',
+    'db23456789123456789123456789',
+    'zxcvbnmasdfghjkqwertyuiop',
+  ];
+  maxRowCount = 2;
   pattern = /^a/;
   sizeOptions = {
     [ComponentSize.Large]: ComponentSize.Large,
@@ -55,7 +77,14 @@ export class TagsInputComponent {
     return null;
   };
 
-  control = new FormControl(this.value, { validators: [this.checkArrFn] });
+  control = new FormControl(this.value, {
+    validators: [Validators.required, this.checkArrFn],
+  });
+
+  rowsControl = new FormControl(this.rowsValue, {
+    validators: [this.checkArrFn],
+  });
+
   size = ComponentSize.Medium;
   allowRepeat = true;
   allowEmpty = false;