Material submenu in separate component doesn't open on mouseover
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Is this a regression?
- [x] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
14
### Description
Creating a menu component as a library when the nested menu is in a separate component. The basic functionality of the menu is to hover over it, a nested menu should be opened. However, when the nested menu is in a separate component, on hover of the parent options, the nested menu is not opening.
This functionality was working fine in angular v14, after upgrading to 15.2.9 we are facing this issue
NOTE: The same functionality will work if the nested menu is in the same component.
### Reproduction
StackBlitz link: https://stackblitz.com/edit/angular-bifan2?file=src%2Findex.html
### Expected Behavior
To open the menu on hover when the nested menu is in a separate component
### Actual Behavior
The menu on hover is not working when the nested menu is in a separate component
### Environment
package.json versions
"@angular/animations": "15.2.9",
"@angular/cdk": "15.2.9",
"@angular/common": "15.2.9",
"@angular/compiler": "15.2.9",
"@angular/core": "15.2.9",
"@angular/forms": "15.2.9",
"@angular/material": "15.2.9",
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and compare the nested-menu hover behavior between Angular 14 and Angular 15.2.9. Trace the Angular Material menu behavior when the nested menu is in a separate component. Done means hovering the parent option opens the nested menu, matching the behavior when both menus are in one component.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100