Weird behavior between chip and combo

[StefanoNotaro]

Description

Actually I'm having two issues. Case 1: The combo open and closes Case 2: The combo is not being rendered under the new target (using position strategy)

• igniteui-angular version: 10.2.17
• browser: edge

Steps to reproduce

1. Go to https://stackblitz.com/edit/github-jn4h1s
2. Open dialog
3. Open dropdown
4. Case 1: Click chip
5. Case 2: Click one chip then the other

Result

Case 1: The combo opens and closes inmediate Case 2: The combo is not being rendered under the new target

Expected result

Case 1: Combo stays open Case 2: Combo change target and render below the second chip

Attachments

Attach a sample if available, and screenshots, if applicable.

[wnvko]

Case1: by default combo has in its overlaySettings closeOnOutsideClick set to true. What happens here is you are clicking on the chip. This forces the combo to open. Immediately it calls closeOnOutsideClick and this closes the combo. To fix this add the chip element in excludeFromOutsideClick array in onChipclicked handler like this:

    this.combo.overlaySettings.excludeFromOutsideClick = [
      event.owner.elementRef.nativeElement,
    ];

Note, in order to be able to close the combo add return in onChipClicked here:

    if (!this.combo?.collapsed) {
      this.combo?.close();
      return;
    }

Case2: first onClick is fired. This goes into onChipClicked handler and checks if the combo is open. If so it calls close and starts close animation. Then is sets the combo target. During the close animation chip gets selected and onSelectionDone fires. onChipSelectionDone handler calls open over the combo. However, the close animation is still not over. When the combo is in this case and open is called combo stops the close animation and starts the open animation at the point where close animation was stopped. It does not go through all the positioning of the drop down and so on. To fix this you should wait close animation to end before call open. To do so you may handler onClosed event of the combo like this:

  public onChipSelectionDone(event: IBaseChipEventArgs): void {
    if (event.owner.selected) {
      if (this.combo.collapsed) {
        this.combo.open();
      } else {
        this.combo.onClosed
          .pipe(take(1))
          .subscribe(() => this.combo.open());
      }
    } else {
      this.combo.close();
    }
  }

Here is fixed Stackblitz sample.

Note: you should fix your onChipClicked as if combo is open it is closing it now and immediately after opens it again. For Case 1 this will leave the combo open forever.

[StefanoNotaro]

Sorry for the late response, This work like a charm!!

Thanks for this solution!!