fix: disabled option should not be closeable

.changeset/sour-nails-teach.md

@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+fix: disabled option should not be closeable

src/select/base-select.ts

@@ -41,7 +41,8 @@ import { OptionFilterFn, SelectFilterOption, TrackFn } from './select.types';
 // tslint:disable-next-line: directive-class-suffix
 export abstract class BaseSelect<T, V = T>
   extends CommonFormControl<V>
-  implements AfterContentInit, AfterViewInit, OnDestroy {
+  implements AfterContentInit, AfterViewInit, OnDestroy
+{
   @Input()
   get size() {
     return this._size;
@@ -146,7 +147,7 @@ export abstract class BaseSelect<T, V = T>
   protected tooltipRef: TooltipDirective;
 
   @ViewChild('optionListRef', { static: false })
-  protected optionListRef: ElementRef;
+  protected optionListRef: ElementRef<HTMLDivElement>;
 
   @ViewChild('inputtingOption', { static: false })
   protected inputtingOption: OptionComponent<T>;
@@ -161,7 +162,7 @@ export abstract class BaseSelect<T, V = T>
   contentOptions: QueryList<OptionComponent<T>>;
 
   isTemplateRef = isTemplateRef;
-  isMulti = false
+  isMulti = false;
 
   /**
    * Utility field to make sure the users always see the value as type array
@@ -194,7 +195,9 @@ export abstract class BaseSelect<T, V = T>
   ngAfterContentInit() {
     this.customCreatedOptions$ = combineLatest([
       this.values$,
-      this.contentOptions.changes.pipe(
+      (
+        this.contentOptions.changes as Observable<QueryList<OptionComponent<T>>>
+      ).pipe(
         startWith(this.contentOptions),
         switchMap((options: QueryList<OptionComponent<T>>) =>
           options.length > 0
@@ -271,7 +274,9 @@ export abstract class BaseSelect<T, V = T>
       refCount(),
     );
 
-    this.hasVisibleOption$ = this.contentOptions.changes.pipe(
+    this.hasVisibleOption$ = (
+      this.contentOptions.changes as Observable<QueryList<OptionComponent<T>>>
+    ).pipe(
       startWith(this.contentOptions),
       switchMap((options: QueryList<OptionComponent<T>>) =>
         options.length > 0

src/select/multi-select/multi-select.component.html

@@ -37,7 +37,7 @@
     [round]="true"
     [border]="true"
     [size]="tagSize"
-    [closeable]="!disabled"
+    [closeable]="!disabled && !option.disabled"
     (close)="removeValue(option.value)"
     [ngClass]="tagClassFn && tagClassFn(option.label, option.value)"
   >

src/select/multi-select/multi-select.component.ts

@@ -159,7 +159,9 @@ export class MultiSelectComponent<T = unknown>
 
     this.selectedOptions$ = combineLatest([
       this.value$,
-      this.contentOptions.changes.pipe(
+      (
+        this.contentOptions.changes as Observable<QueryList<OptionComponent<T>>>
+      ).pipe(
         startWith(this.contentOptions),
         switchMap((options: QueryList<OptionComponent<T>>) =>
           options.length > 0
@@ -169,11 +171,13 @@ export class MultiSelectComponent<T = unknown>
                     option.value$,
                     option.label$,
                     option.labelContext$,
+                    option.disabled$,
                   ]).pipe(
-                    map(([value, label, labelContext]) => ({
+                    map(([value, label, labelContext, disabled]) => ({
                       value,
                       label,
                       labelContext,
+                      disabled,
                     })),
                   ),
                 ),
@@ -183,22 +187,37 @@ export class MultiSelectComponent<T = unknown>
       ),
     ]).pipe(
       map(([values, options]) =>
-        values.map(value => {
-          const option = options.find(
-            option => this.trackFn(option.value) === this.trackFn(value),
-          );
-          return option
-            ? {
-                label: option.label || coerceString(this.trackFn(option.value)),
-                labelContext: option.labelContext,
-                value: option.value,
-              }
-            : {
-                label:
-                  this.labelFn?.(value) || coerceString(this.trackFn(value)),
-                value,
-              };
-        }),
+        values
+          .map(value => {
+            const option = options.find(
+              option => this.trackFn(option.value) === this.trackFn(value),
+            );
+            return option
+              ? {
+                  label:
+                    option.label || coerceString(this.trackFn(option.value)),
+                  labelContext: option.labelContext,
+                  value: option.value,
+                  disabled: option.disabled,
+                }
+              : {
+                  label:
+                    this.labelFn?.(value) || coerceString(this.trackFn(value)),
+                  value,
+                };
+          })
+          // sort disabled options as first
+          .sort((a, b) => {
+            if (a.disabled) {
+              return -1;
+            }
+
+            if (b.disabled) {
+              return 1;
+            }
+
+            return 0;
+          }),
       ),
       publishReplay(1),
       refCount(),

src/select/option/option.component.ts

@@ -44,6 +44,8 @@ export class OptionComponent<T> {
 
   private readonly value$$ = new BehaviorSubject(this.value);
 
+  private readonly disabled$$ = new BehaviorSubject(this.disabled);
+
   @Input()
   get label() {
     return this._label;
@@ -75,18 +77,19 @@ export class OptionComponent<T> {
   }
 
   @Input()
-  get disabled() {
+  get disabled(): boolean {
     return this._disabled;
   }
 
   set disabled(val: boolean | '') {
     this._disabled = coerceAttrBoolean(val);
+    this.disabled$$.next(this._disabled);
   }
 
   isMulti = false;
 
   @ViewChild('elRef', { static: true })
-  elRef: ElementRef;
+  elRef: ElementRef<HTMLDivElement>;
 
   private readonly select: BaseSelect<T>;
   selected = false;
@@ -97,6 +100,7 @@ export class OptionComponent<T> {
   value$ = this.value$$.asObservable();
   label$ = this.label$$.asObservable();
   labelContext$ = this.labelContext$$.asObservable();
+  disabled$ = this.disabled$$.asObservable();
 
   selected$: Observable<boolean>;
   size$: Observable<ComponentSize>;

src/select/select.component.ts

@@ -68,13 +68,15 @@ export class SelectComponent<T = unknown>
   isClearable = (hasSelected: boolean) =>
     !this.disabled && this.clearable && hasSelected;
 
-    override ngAfterContentInit() {
+  override ngAfterContentInit() {
     super.ngAfterContentInit();
 
     this.selectedOption$ = combineLatest([
-      this.contentOptions.changes.pipe(
+      (
+        this.contentOptions.changes as Observable<QueryList<OptionComponent<T>>>
+      ).pipe(
         startWith(this.contentOptions),
-        switchMap((options: QueryList<OptionComponent<T>>) =>
+        switchMap(options =>
           combineLatest(options.map(option => option.selected$)).pipe(
             startWith(null as void),
             map(() => options.find(option => option.selected)),

src/select/select.types.ts

@@ -6,6 +6,7 @@ export interface SelectOption {
 }
 
 export interface SelectFilterOption<T> extends SelectOption {
+  disabled?: boolean;
   value: T;
 }
 
@@ -18,7 +19,7 @@ export type TrackFn<T, R = unknown> = (value: T) => R;
 
 export type TagClassFn<
   V,
-  T extends string | TemplateRef<unknown> = string | TemplateRef<unknown>
+  T extends string | TemplateRef<unknown> = string | TemplateRef<unknown>,
 > = (
   label: T,
   value: V,

stories/select/select.stories.mdx

@@ -212,7 +212,7 @@ import { SelectModule, IconModule } from '@alauda/ui';
         arr: Array.from({ length: 50 })
           .fill(null)
           .map((_, i) => `option${i + 1}`),
-        value: ['option1'],
+        value: ['option1', 'option5'],
       },
     }}
   </Story>