overflow-menu : Oververflow-menu-body position is wrong #9827
Comments
|
We've marked this issue as stale because there hasn't been any activity for 60 days. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions. |
|
Same thing happens for us, when trying to use it... 
|
|
@rccc @techtolentino Can you share repros? |
|
I am going to check what i can share. Let me a few days. Eric |
|
@rccc - thanks for responding. Don't worry about it. I figured out ☝🏼 this issue, but then ran into other issues within our own application that makes this particular component unusable (for our use case). Thanks! |
kennylam
added
package: carbon web components
and removed
severity 2
|
Hi - as discussed with @ariellalgilmore I'm seeing a weird bug when using an overflow menu within a data-table to do filtering on the table. See this example: If I reload the preview panel, scroll down with the scroll bar until Example table is in the middle of the screen, then click the filter icon (next to the Search icon) in the Example Table, it opens an overflow menu, but jumps the page to the top. Interestingly, I've discovered whilst using codesandbox, that it only started jumping to the top once I added the pagination for the table at the bottom! Specifically, when I added the select/index.js component to make the page number drop down work. So even though the affected table doesn't have pagination, the presence of pagination on a different table causes the problem. |
|
Any fixes for this? The component has the described behaviour no matter its location (within a table, direct descendant of body tag, etc). I was able to reproduce in: The only fix I have right now is to use a workaround where we manually set the top attribute using a MutationObserver whenever the top attribute is attempted to be changed. This is obviously unsustainable, but the component is otherwise unusable. |
|
It's been added to this sprint, so it should be included in the next release. |
### Related Ticket(s) Closes #9827 ### Description the `refBottom` needs to be compared to the `containerTop`, so that the menu sticks to the bottom of button Example (using local `yarn pack`: https://codesandbox.io/p/devbox/test-overflowmenu-t4slfp?file=%2F.codesandbox%2Ftasks.json%3A1%2C241 live demo: https://t4slfp-9000.csb.app/ ### Changelog **New** - {{new thing}} **Changed** - changed `refBottom` to a let and then equal `refBottom = refBottom - containerTop;` - ^ wondering if this can be cleaned up code wise, but testing locally with overflow-menu it seems successful **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
### Related Ticket(s) Closes carbon-design-system#9827 ### Description the `refBottom` needs to be compared to the `containerTop`, so that the menu sticks to the bottom of button Example (using local `yarn pack`: https://codesandbox.io/p/devbox/test-overflowmenu-t4slfp?file=%2F.codesandbox%2Ftasks.json%3A1%2C241 live demo: https://t4slfp-9000.csb.app/ ### Changelog **New** - {{new thing}} **Changed** - changed `refBottom` to a let and then equal `refBottom = refBottom - containerTop;` - ^ wondering if this can be cleaned up code wise, but testing locally with overflow-menu it seems successful **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
### Related Ticket(s) Closes carbon-design-system#9827 ### Description the `refBottom` needs to be compared to the `containerTop`, so that the menu sticks to the bottom of button Example (using local `yarn pack`: https://codesandbox.io/p/devbox/test-overflowmenu-t4slfp?file=%2F.codesandbox%2Ftasks.json%3A1%2C241 live demo: https://t4slfp-9000.csb.app/ ### Changelog **New** - {{new thing}} **Changed** - changed `refBottom` to a let and then equal `refBottom = refBottom - containerTop;` - ^ wondering if this can be cleaned up code wise, but testing locally with overflow-menu it seems successful **Removed** - {{removed thing}} <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
Description
overflow-menu-body should be inside oveflow-menu, but once oveflow-menu is open, i noticed overflow-menu-body is outside and then position on screen is wrong.
Component(s) impacted
overflow-menu
Browser
Chrome, Firefox
Carbon for IBM.com version
1.21.0
Severity
Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.
Application/website
https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/basic/components/pagination
Package
@carbon/ibmdotcom-web-components
CodeSandbox example
https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/basic/components/pagination
Steps to reproduce the issue (if applicable)
No response
Release date (if applicable)
No response
Code of Conduct
The text was updated successfully, but these errors were encountered: