Hello,

Thank you for bringing this described behavior regarding the igxButton with a tooltip and dropdown to our attention.

I have been looking into your question and in Angular, the order of directive bindings can sometimes affect the behavior of components, especially when multiple directives interact with the same element.

The described behavior you're experiencing arises because the [igxDropDownItemNavigation] directive, responsible for dropdown item navigation, is dependent on the dropdown being fully initialized and available. When you declare [igxTooltipTarget] before [igxDropDownItemNavigation], the tooltip binding might cause the dropdown initialization to be delayed or occur in an unexpected order, resulting in the navigation not working as expected.

To address this issue and ensure the proper functioning of the igxButton with both tooltip and dropdown components, I recommend following the corrected approach you have identified:

<button
  class="button"
  igxButton="contained"
  [igxDropDownItemNavigation]="dropdown"
  [igxTooltipTarget]="tooltipRef"
  [igxToggleAction]="dropdown"
></button>

By placing the [igxTooltipTarget] directive after [igxDropDownItemNavigation], you ensure that the dropdown is fully initialized before the tooltip binding takes effect, thus preventing any potential conflicts or delays in initialization.

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics