TreeSelect popup closes when unchecking nodes

[joel-matthias]

Describe the bug

When selectionMode is set to 'checkbox', unchecking a checked tree node causes the popup to close prematurely

Environment

Issue can be reproduced in PrimeNG demo app https://primeng.org/treeselect#checkbox

Reproducer

No response

Angular version

16

PrimeNG version

16.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.20.1

Browser(s)

Chrome, Firefox

Steps to reproduce the behavior

Open PrimeNG demo page at https://primeng.org/treeselect#checkbox
Open select
Check an item
Uncheck that item
Result: Popup tree closes
Expected: Popup tree should stay open

Expected behavior

Popup tree should stay open

[Romain-Luengo]

Same behavior here

https://primeng.org/multiselect

[fkrajcar-cirtuo]

+1

also happens on PrimeNG v17.7.0, seems like it was working as expected on PrimeNG v15 - https://www.primefaces.org/primeng-v15-lts/treeselect#checkbox

[fkrajcar-cirtuo]

There is a workaround for this bug:

<p-treeSelect #treeselect class="w-full md:w-20rem" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" display="chip" [metaKeySelection]="false" selectionMode="checkbox" placeholder="Select Item" (onHide)="onHide($event)"></p-treeSelect>

Add [metaKeySelection]="false" and (onHide)="onHide($event)" on <p-treeSelect>

In your .ts:

  onHide(event) {
    if (event === undefined) {
      this.treeselect.overlayVisible = true;
    }
  }

Credit goes to Berkin Sansal - SO thread - https://stackoverflow.com/questions/76976298/how-to-prevent-overlay-of-treeselect-checkbox-auto-collapse-when-click-child-nod

[GitHubStan]

onHide(event) {
if (event === undefined) {
this.treeselect.overlayVisible = true;
}
}

Thanks for the fix, @fkrajcar-cirtuo. However, it's a partial fix. With this fix, they can't close the treeselect by clicking on the select box. Since event is undefined, we can't tell what they clicked on to conditionally hide the overlay.

[GitHubStan]

Note that this only happens when you click on the checkbox. If you click on the label for the checkbox, things work as expected.

[fkrajcar-cirtuo]

onHide(event) {
if (event === undefined) {
this.treeselect.overlayVisible = true;
}
}

Thanks for the fix, @fkrajcar-cirtuo. However, it's a partial fix. With this fix, they can't close the treeselect by clicking on the select box. Since event is undefined, we can't tell what they clicked on to conditionally hide the overlay.

Yes, that is correct, but that was not a problem in our case since clicking outside the panel (and label itself) and ESC closes it as expected.

[GitHubStan]

Here's my monkey patch of onClick() that allows med to close the overlay by clicking on the dropdown box.

  @ViewChild(TreeSelect)
  treeselect: TreeSelect;

  ngAfterViewInit(): void {
    this.treeselect.onClick = this.monkeyPatchTreeSelectOnClick.bind(this);
  }

private monkeyPatchTreeSelectOnClick(event: any) {
  if (this.treeselect.disabled) {
    return;
  }

  if (
    !this.treeselect.overlayViewChild?.el?.nativeElement?.contains(event.target) &&
    !DomHandler.hasClass(event.target, 'p-treeselect-close') &&
    this.indicatesDropDownBox(event) // This is the line added for the fix
  ) {
    if (this.treeselect.overlayVisible) {
      this.treeselect.hide();
    } else {
      this.treeselect.show();
    }

    this.treeselect.focusInput?.nativeElement.focus();
  }
}

private indicatesDropDownBox(event: any) {
  const classesIndicatingDropdownWasClicked = [
    'p-treeselect-label',
    'p-treeselect-label-container',
    'p-treeselect-trigger',
    'p-treeselect-trigger-icon',
  ];
  const indicatesDropDownBox = classesIndicatingDropdownWasClicked.some((c) => DomHandler.hasClass(event.target, c));
  return indicatesDropDownBox;
}

[zfloyd]

@cetincakiroglu , this update has caused the TreeSelect to not close when in "single" mode after making a selection. I'm not sure why this change was made, but its almost assuredly the reason for the break.

if (this.selectionMode === 'single') {
            // this.hide();
            this.focusInput?.nativeElement.focus();
        }

[cetincakiroglu]

@cetincakiroglu , this update has caused the TreeSelect to not close when in "single" mode after making a selection. I'm not sure why this change was made, but its almost assuredly the reason for the break.

if (this.selectionMode === 'single') {
            // this.hide();
            this.focusInput?.nativeElement.focus();
        }

Hi,

Thanks for letting us know, we'll check it. Could you please also share a stackblitz example and tag me so we can better understand the issue?

[zfloyd]

@cetincakiroglu just compare the "Basic" example of Tree Select in PrimeNG 16 with the latest one in the demo site:
https://www.primefaces.org/primeng-v16-lts/treeselect#basic
https://primeng.org/treeselect#basic

Selecting an item is supposed to close the control.

[mrkubad]

Hi,

As @zfloyd said this fix has broken behavior that caused to close overlay in a single selection mode.

control behavior before fix

control behavior after fix

Is someone working on fixing this issue?