PrimeNG：从下拉列表中选择选项时，工具提示会冻结

Question

当从PrimeNG下拉列表中选择一个选项时，PrimeNG工具提示会冻结并且不会自动隐藏。在悬停和单击时，除非选择了选项，否则工具提示工作正常。

模板代码如下：

<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

通过从已更改所选选项的DOM中删除tooltip元素来解决此问题。

在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>

为Angular Component类中的 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();
}