PrimeNG：ドロップダウンからオプションを選択するとツールチップがフリーズします

Question

PrimeNGツールチップがフリーズし、PrimeNGドロップダウンからオプションを選択すると自動的に非表示になります。マウスを動かすとクリックすると、オプションが選択されている場合を除いて、ツールチップが正常に機能しています。

テンプレートコードは、以下である：選択されたオプションが変更にDOMからツールチップ要素を除去することによってそれを解決

<div class="col-lg-3 col-md-6 col-sm-5 col-xs-12"> <div class="form-group"> <label for="equipmentFeature" class="col-lg-4 col-md-3 col-sm-3 col-xs-12 control-label">Equipment Feature</label> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-9"> <p-dropdown [style]="{'width':'100%'}" filter="true" filterPlaceholder="Search" placeholder="--Select--" [options]="equipmentFeatures" name="equipmentFeature" pTooltip="Select Equipment Feature" tooltipPosition="right"> </p-dropdown> </div> </div> </div>

Answer 1

。 HTMLテンプレートの

追加のonChangeイベント：

 <div class="col-lg-3 col-md-6 col-sm-5 col-xs-12"> 
     <div class="form-group"> 
      <label for="equipmentFeature" class="col-lg-4 col-md-3 col-sm-3 col-xs-12 control-label">Equipment Feature</label> 
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-9"> 
       <p-dropdown [style]="{'width':'100%'}" filter="true" filterPlaceholder="Search" placeholder="--Select--" [options]="equipmentFeatures" 
        [(ngModel)]="currentRateData.equipmentFeature" name="equipmentFeature" pTooltip="Select Equipment Feature" 
        tooltipPosition="right" (onChange)="onFeatureChange()"> 
       </p-dropdown> 
      </div> 
     </div> 
    </div> 

角度成分クラスの のonChangeイベントの

追加イベントハンドラー：

onFeatureChange() 
{ 
    //it's just a hack for tooltip frozen on dropdown option selected issue. 
    let elem = <HTMLElement>document.querySelector('.ui-widget.ui-tooltip.ui-tooltip-right'); 
    elem.remove(); 
}