Expose click & toggle events for Side Navigation
See original GitHub issueIs your feature request related to a problem? Please describe.
Without click events, regular Angular things like <div routerLink="/"></div>
do not work and must be worked around.
Also, it is impossible to do something when a <ui5-side-navigation-item>
item is collapsed/expanded as no events are fired. In my use case, I want to store the expanded property in the browser’s local store, so that it remains the same way after a page refresh.
Also, the UX of clicking only the icon of the side bar item is not the greatest.
Describe the solution you’d like
- Expose the click events for
<ui5-side-navigation-item>
and<ui5-side-navigation-sub-item>
. - Expose the toggle (for collapse/expand) events for
<ui5-side-navigation-item>
in the case, where<ui5-side-navigation-sub-item>
exist. - Make it possible to cause the collapse/expand by clicking anywhere on the
<ui5-side-navigation-item>
instead of just the icon. Could be a new property.
Describe alternatives you’ve considered
- Manually cause clicks:
<ui5-side-navigation (selection-change)="$event.detail.item.click()">
<ui5-side-navigation-item routerLink="/"></ui5-side-navigation-item>
</ui5-side-navigation>
Monkey Patches:
this.sideBar //
.shadowRoot.querySelector('ui5-tree') //
.shadowRoot.querySelector('ui5-li-tree[icon="course-book"]') //
.addEventListener('click', () => this.toggleGroup());
Additional context
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
How can we close a toggle menu with an outside click
First things first for the JS: · Search the page for any instance of the menu class document.querySelectorAll · Get the items element...
Read more >HTMLDetailsElement: toggle event - Web APIs | MDN
The toggle event fires when the open / closed state of a <details> element is toggled. This event is not cancelable and does...
Read more >JavaScript - Bootstrap
.modal('toggle') ... Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal...
Read more >UI events - Android Developers
UI events are actions that should be handled in the UI layer, either by the UI or by the ViewModel. The most common...
Read more >ASP.NET Core Blazor event handling - Microsoft Learn
An onclick event occurring in the child component is a common use case. To expose events across components, use an EventCallback.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hello @hrstoyanov the PR is merged and released in npm under the 0.0.0-e7dd012d7 version. But, you can just use the “next” tag to install it. It includes the requested events and properties in this issue.
One breaking change that you have to be aware and should adopt is related to the icons’ usage:
BREAKING CHANGE
icons: refactor(icons): flatten dist directory(#2425) (c84bc8b) Change the distribution path of all individual icons, which changes all icons’ public imports, by bringing the icons’ modules one level up.
If you previously had: import “@ui5/webcomponents-icons/dist/icons/accept.js”;
Now you should remove the icons folder: import “@ui5/webcomponents-icons/dist/accept.js”;
BR, ilhan
Thanks, I will give it a test shortly!