I have a menu within a submenu with some items. When I open the menu by click and try to click on the submenu it doesn't open. I know because I set this property [autoClose]="true". But if I change the property to false, ok it open correctly the submenu but if I click outside the menu it does not close. The behaviour that I want is that if I click outside the menu I want that the menu does close.
https://stackblitz.com/edit/angular-ivy-vzzmeb
The submenu is called Roles
You can add a onBlur method to programmatically close the menu
Related
Frontend noob here, please be nice.
I have a dropdown menu using ui.bootstrap.dropdown. The users of my website are used to copy-paste stuff from this dropdown. In order to do so, they usually click down inside the dropdown zone, select the text they want to copy a little too fast and release the click outside the dropdown zone. With this behaviour, the dropdown closes before the user could copy-paste their selection.
Instead of closing the dropdown on an mouseup event outside of the dropdown zone, could it be a mousedown event that would close the dropdown ?
It all has to do with the auto-close setting. By default, it is set to always. With this setting, the dropdown collapses on any outside mouseup.
To be able to control it more finely, I had to use the auto-close="disabled" setting coupled with is-open="variable.isOpen".
Then, I created an callback on a mouse down event that is outside of the dropdown
$('html').mousedown(function(e) {
if($scope.variable?.isOpen && !e.target?.closest('.classOfDropdown')) {
$scope.variable.isOpen = false;
$scope.$digest()
}
});
I initialized $scope.variable inside the on-toggle callback.
I have a mat-sidenav and a list of mat-item and mat-menu. Then when I hover over of one of the items I want the menu to display. This part is working. But then when I move off of that menu or item and over a new item I want its menu to display.
https://stackblitz.com/edit/angular-xsscrm
I have included a stackblitz with a demo of the behavior.
What is wrong here I have both on enter and exit, but then when I leave a menu on to a new one, it doesnt open unless I click on it.
Thanks for the help
The issue here is that when a menu opens, it creates an overlay with a backdrop that overlaps all elements. This backdrop is causing the mouse events to not be 'seen' by the listening element until the overlay is dismissed via a mouse click. Luckily, the menu control has a flag to remove the backdrop; setting this to false fixes the issue you're seeing.
Side note: you have an *ngFor on the <mat-list> element, but I think you want to move it to the <mat-list-item> element instead because you want many list items, not many lists. Since you're using the local variable of *ngFor outside of the <mat-list-item>, you can create an <ng-container> element to house your *ngFor. See below stackblitz:
https://stackblitz.com/edit/angular-xsscrm-kx6jyd
Another side note: this behavior is similar to a tooltip. Perhaps that would be a better control for your use-case? https://material.angular.io/components/tooltip/overview
When you repeat the same selection item, already selected, the dropdown menu remains open. I would like to collapse the menu as it occurs when you select a different item. You can check this behavior in the demo. How can I modify the element to collapse the menu in any case?. Thanks.
The paper-dropdown-menu has an 'opened' property. You can listen on click of the dropdown content and if opened is true, set it to false.
I have a navigation menu that on a desktop browser uses a hover event that expands a collapsed menu. It works fine on Desktop.
The problem is that on the iPad it appears like the wrong menu item is tapped.
Steps to reproduce:
Put iPad in horizontal mode
Go to http://qaphppos.blastohosting.com/PHP-Point-Of-Sale/
username: admin
password: 12345678
Click Sales on the left side
Try to click any other item on the left side and you will see that your click doesn't translate to the right menu item.
Is this a bug in iOS 8 or is this something that I can even fix? I wouldn't mind if they had to tap twice (once to open menu and once to select); but I am not sure how to do this.
I think the problem is that you are setting focus with JavaScript on the textbox labelled “enter item name or scan”. So your first tap is losing focus for the textbox, and the second actually select the menu.
After entering sales:
Try tapping on a black space. You will see the textbox lose focus.
Try tapping on the menu items, they will work.
As Joe mentioned problem is in setting focus on the textbox labelled "enter item name or scan barcode".
But I wan't to mention that your textbox is not getting exact focus, it is looking like textbox is in focus but it's not, because if textbox is in full focus then device keypad should open automatically as soon as textbox gets focus.
I think css class for textbox focus is setting but textbox is not getting focus.
When I click a button, then a drop down menu must be shown. When I click anywhere in the page it, needs to hide. The problem I have is here: when I run the page, I can see the drop down menu instead of the click event. I tried with different div tags, but to no effect.
Demo: http://jsfiddle.net/Navya/69KGD/
You need to set your dropdown list visibility to false (to hide it) when page loads.
$("#container").hide();
After that, when you click the button you set visibility to true (show it).
$("#container").show();