Clarity: clr-dropdown doesn't close on click for dynamic content

[aur8l]

Hi there,
I recently updated to 2.0.2 and since, *ngFor generated clr-dropdown content clicks are not closing the menu.

I tested by adding a item outside of the *ngFor and a click on that one closes the menu.

[gnomeontherun]

It helps us to have a demo of what you are seeing using StackBlitz, so can you provide that so we can triage?

[RuslanZh]

@gnomeontherun hi, I created for you example https://stackblitz.com/edit/clarity-qulkmz-issue, I have the same issue.

[gnomeontherun]

I reviewed this demo and the behavior only happens when you change the bindings inside of the dropdown parent. I haven't dug into why, but also this indicates that the dropdown is being used as a select box which is not what the control should be used for. I'm going to close this as it appears to be an unsupported use case and we recommend you use a select instead.

[BigBadaboom]

Here's a use case: a nav that supports an overflow menu on small screens.

We use a BreakpointObserver to detect phone screens and move menu items into an overflow menu implemented using a dropdown.

When you select a nav item in the overflow menu, we want to move it to the visible portion of the nav, so that the user can see which nav item is selected. However I am finding that when I regenerate the nav menu (visible and overflow menu arrays) the dropdown stays open. Plus it seems to ignore the clrPosition setting.

[gnomeontherun]

We have the vertical nav or sidenav for mobile navigation. If you are doing something different, then I would need to better understand what the issue is with a separate demo and issue.

[patriceo]

I reviewed this demo and the behavior only happens when you change the bindings inside of the dropdown parent. I haven't dug into why, but also this indicates that the dropdown is being used as a select box which is not what the control should be used for. I'm going to close this as it appears to be an unsupported use case and we recommend you use a select instead.

This is a strong opinion, I have the same use-case (and most of applications use this pattern too), I'd like to update/recompute the drop-down template once a menu item is clicked and get the drop-down to be closed automatically. In my use case this is not a selection, because I'm using menu with sub-menus and a select would be confusing.

At least could you tell us a workaround to this issue ? I don't see how to close the drop-down programmatically in the doc ?

Thanks

[patriceo]

I reviewed this demo and the behavior only happens when you change the bindings inside of the dropdown parent. I haven't dug into why, but also this indicates that the dropdown is being used as a select box which is not what the control should be used for. I'm going to close this as it appears to be an unsupported use case and we recommend you use a select instead.

This is a strong opinion, I have the same use-case (and most of applications use this pattern too), I'd like to update/recompute the drop-down template once a menu item is clicked and get the drop-down to be closed automatically. In my use case this is not a selection, because I'm using menu with sub-menus and a select would be confusing.

At least could you tell us a workaround to this issue ? I don't see how to close the drop-down programmatically in the doc ?

Thanks

Answering to my own question, I have found this workaround after digging into clarity source code, not elegant but works

@ViewChild('dropdown')
dropdown: ClrDropdown;

//...

/*
* dropdown-item click handler
*/
onItemClick(value) {
    // ... my logic 
    this.dropdown.toggleService.open = false;
}

the updated stackblitz: https://stackblitz.com/edit/clarity-qulkmz-issue-8ozrk4

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.