PrimeNG 17.18.x中p-dropdown的[disabled]属性失效问题求助

我在PrimeNG 17.18.x版本中遇到p-dropdown设置[disabled]="!isEditable"后，组件未被真正禁用，仍可获取焦点并选择选项，但14.x版本功能正常。相关代码如下：

<p-dropdown placeholder=" " [formControl]="dropdownControl" [options]="options"
            [disabled]="!isEditable" optionLabel="label" optionValue="value" optionDisabled="inactive"
            [dropdownIcon]="'none'"
            [appendTo]="appendTo" (onChange)="onChange.emit($event)"></p-dropdown>

以下是几种可行的解决方向：

• 优先同步表单控件状态
  当使用formControl时，Angular表单控件的disabled状态优先级高于组件的[disabled]输入属性。如果formControl未同步设置禁用状态，组件的[disabled]可能被覆盖。可以在组件类中监听isEditable的变化，同步更新formControl的状态：

  import { Component, Input, OnChanges } from '@angular/core';
  import { FormControl } from '@angular/forms';
  
  @Component({
    selector: 'your-component',
    templateUrl: './your-component.html'
  })
  export class YourComponent implements OnChanges {
    @Input() isEditable: boolean;
    dropdownControl = new FormControl();
  
    ngOnChanges() {
      this.isEditable ? this.dropdownControl.enable() : this.dropdownControl.disable();
    }
  }
  

  模板中可以保留[disabled]作为兜底，或者直接依赖formControl的状态控制组件禁用。

• 排查PrimeNG版本bug
  PrimeNG 17.18.x可能存在该组件的disabled状态失效bug，建议检查PrimeNG官方GitHub的issues列表，确认是否为已知问题。如果是已知bug，可以升级到最新的17.x补丁版本，或临时降级至稳定的17.x版本。

• 手动添加禁用兜底逻辑
  如果上述方法无效，可以通过Renderer2手动操作DOM，为组件添加禁用属性和样式：

  import { Component, Input, ViewChild, OnChanges, Renderer2 } from '@angular/core';
  import { Dropdown } from 'primeng/dropdown';
  
  @Component({
    selector: 'your-component',
    templateUrl: './your-component.html'
  })
  export class YourComponent implements OnChanges {
    @Input() isEditable: boolean;
    @ViewChild(Dropdown) dropdown: Dropdown;
  
    constructor(private renderer: Renderer2) {}
  
    ngOnChanges() {
      if (!this.dropdown?.el) return;
      const inputEl = this.dropdown.el.nativeElement.querySelector('input');
      if (!inputEl) return;
  
      if (!this.isEditable) {
        this.renderer.setAttribute(inputEl, 'disabled', 'disabled');
        this.renderer.addClass(this.dropdown.el.nativeElement, 'p-disabled');
      } else {
        this.renderer.removeAttribute(inputEl, 'disabled');
        this.renderer.removeClass(this.dropdown.el.nativeElement, 'p-disabled');
      }
    }
  }
  

  确保p-disabled类包含pointer-events: none等样式，阻止用户交互。

• 排除optionDisabled属性干扰
  代码中使用了optionDisabled="inactive"控制单个选项的禁用状态，虽然不影响组件本身的禁用，但可以暂时移除该属性测试，排除潜在的属性冲突问题。

内容的提问来源于stack exchange，提问作者Damien Cooke