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 中删除所选选项更改的工具提示元素来解决此问题。

在 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 组件 class:

中为 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();
}

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

PrimeNG: Tooltip freezes when option is selected from dropdown

angular2-forms

primeng