infor-design
PopupMenu: SubMenu in PopupMenu not working as intended
Encountered this error when hovering the MenuItem to display the SubMenu.
Here's the rendered element:
How can I fix this issue? Already tried setting a value for scrollLeft but still encountering the error.
@tenacity00 How would we be able to reproduce this?
- Try reproducing in the examples https://main.wc.design.infor.com/ids-popup-menu ? (i dont see it)
- Check your code against ours https://github.com/infor-design/enterprise-wc/tree/main/src/components/ids-popup-menu
- Try the latest version (beta.23)
Aside from that would need a reduced test case or way to see it in the examples? Also if that code can reproduce it please include it as text not a screen shot.
Worth Looking at: https://usersnap.com/blog/what-is-a-bug-report/
Suggestion based on quick look at the screen shot is remove: style: "position: absolute"
Hi @tmcconechy, thank you so much for taking some time to answer my inquiry. when I use the dataset code: ( I'm using typescript )
const menu = new PopupMenu();
menu.target = this.options.id;
menu.triggerType = "click"
menu.data = {
id: this.options.id,
contents: [
{
type: 'group',
items: [
{
text: 'One',
value: '1',
type : 'item'
},
{
text: 'Two',
value: '2',
type : 'item'
},
{
text: 'Three',
value: '3',
type : 'item',
submenu: {
id:'submen',
contents : [{type: 'group',
items : [{
text : 'o1',
value : 'o1',
type: 'item'
}]
}]
}
},
]
}
]
}
this.idsComponent.insertAdjacentElement("afterend", menu)
It's working properly, clicking the MenuButton, Displaying Menu, Displaying Sub Menu. But the PopupMenu is displaying upwards.
But when I use this code:
const menu = new PopupMenu();
menu.id = this.options.id
menu.target = this.options.id
menu.triggerType = "click"
const group = new IdsMenuGroup();
menu.appendChild(group);
const itemOne = new IdsMenuItem();
itemOne.value = 1;
itemOne.textContent = '1'
group.appendChild(itemOne);
const itemTwo = new IdsMenuItem();
itemTwo.value = 2;
itemTwo.textContent = '2'
group.appendChild(itemTwo);
const menu1 = new PopupMenu();
menu1.id = this.options.id
menu1.target = this.options.id
menu1.triggerType = "click"
// document.body.appendChild(menu);
const group1 = new IdsMenuGroup();
menu1.appendChild(group1);
const itemOne1 = new IdsMenuItem();
itemOne1.value = 1;
itemOne1.textContent = '1'
group1.appendChild(itemOne1);
const itemTwo1 = new IdsMenuItem();
itemTwo1.value = 2;
itemTwo1.textContent = '2'
group1.appendChild(itemTwo1);
const itemThree = new IdsMenuItem();
itemThree.value = 3;
itemThree.textContent = '3'
itemThree.appendChild(menu1);
group.appendChild(itemThree);
this.idsComponent.insertAdjacentElement("afterend", menu)
I received the scrollLeft error. and when I duplicate the this.idsComponent.insertAdjacentElement("afterend", menu) I didn't encounter the error. which I think is weird.
how to make it display downwards?
I'm on beta v21. upgraded it to v23 the issue still occurs.
I couldn't replicate it on: https://main.wc.design.infor.com/ids-popup-menu
@tenacity00 Wierd bug :). A couple initial observations and i'll try and work on this soon.
- Do you think you can make an example in https://stackblitz.com/edit/ids-enterprise-wc-beta-23?file=index.html so we can share the code better and debug?
- One wierd thing is your menu items looks really "short" do you have some css that could be changing the size of the menu items?
- in general it should open down because of this line https://github.com/infor-design/enterprise-wc/blob/main/src/components/ids-menu-button/ids-menu-button.ts#L222 which is how you configure the popup to open down
- Maybe its better to use the ids-menu-button component for your case? this way you dont need to configure it as much https://github.com/infor-design/enterprise-wc/blob/main/src/components/ids-menu-button/demos/example.html#L15-L18
- Maybe a problem of creating it dynamically in TS? Is that necessary for you?
Hi @tmcconechy ,
Thank you.
-
I placed the rendered element here and I was able to replicate the issue, I'm not sure what part of it I'm missing. https://stackblitz.com/edit/ids-enterprise-wc-beta-23-bb4wnt?file=index.html
-
I reverted some of my changes and I think it's now displaying properly tho the SubMenu looks weird.
-
I'm appending the PopupMenu after rendering the IdsMenuButton {MenuButton}.insertAdjacentElement("afterend", menu )
-
As of now yes, we're thinking of controlling it dynamically on the backend side.
@tenacity00 something is strange. I was able to make it work like this in our project but not in the stackblitz.
<ids-menu-button
id="btn-action"
menu="btn-action-menu"
dropdown-icon="dropdown"
appearance="secondary">
<span>Action</span>
</ids-menu-button>
<ids-popup-menu id="btn-action-menu">
<ids-menu-group>
<ids-menu-item>
Add Work Order
<ids-popup-menu slot="submenu">
<ids-menu-group>
<ids-menu-item id="sub-menu6">
sub-menu6
</ids-menu-item>
</ids-menu-group>
</ids-popup-menu>
</ids-menu-item>
<ids-menu-item>
Add Case
<ids-popup-menu
slot="submenu">
<ids-menu-group>
<ids-menu-item id="sub-menu20">
<ids-text>sub-menu20</ids-text>
</ids-menu-item>
</ids-menu-group>
</ids-popup-menu>
</ids-menu-item>
<ids-menu-item>
Duplicate Service Request
<ids-popup-menu slot="submenu">
<ids-menu-group>
<ids-menu-item>sub-menu92</ids-menu-item>
</ids-menu-group>
</ids-popup-menu>
</ids-menu-item>
</ids-menu-group>
</ids-popup-menu>
You have a lot of uneeded stuff in there and the position style. But it wont work in the stackblitz. I thought this may indicate a missing import but i quickly checked and dont see any missing. I'll route this to another developer to take a look in the future but perhaps my snippet helps as it worked in my case in the actual project when i put it here:
https://github.com/infor-design/enterprise-wc/blob/main/src/components/ids-menu-button/demos/example.html
Note it uses these imports in that example:
https://github.com/infor-design/enterprise-wc/blob/main/src/components/ids-menu-button/demos/index.ts#L2-L8
I am able to reproduce this in v1.0.0 with the official example.
Reproducible Demo Link: https://stackblitz.com/edit/ids-enterprise-wc-100-shbkbg?file=index.html Reference Official Example: https://main.wc.design.infor.com/ids-menu-button/disabled.html
Steps to reproducce:
- Access the demo link.
- Click on the Settings menu button and hover your mouse over the Settings submenu.
- Observe that the submenus "Sub-item One", etc. are not displayed.
- Open the browser's Developer Tools (the error will not appear in Stackblitz's console).
- Notice the error related to "scrollLeft".
I hope this helps investigating the issue easier.
Question: @tmcconechy, is there a temporary workaround while we wait for the fix.
@kshwetabh I cant reproduce seem to reproduce it on https://main.wc.design.infor.com/ids-menu-button/disabled.html
For the stackblitz I didnt spend time going line by line but did you check if you missed something? I do see it there.
@tmcconechy sorry for the confusion. I meant using the same code as used in the official IDS demo page, I am able to reproduce the issue in Stackblitz. The officcial IDS demo page works fine for me too.
I used the exact same code as used by the official demo page. I update the code further on stackblits to make it more minimalist and easier to review now. https://stackblitz.com/edit/ids-enterprise-wc-100-shbkbg?file=index.html