enterprise-wc
enterprise-wc copied to clipboard
IdsPopup/IdsDataGrid: Popup is cutoff by Data Grid containment
Describe the bug The current design of our Popups/Data Grids -- specifically containment and nesting of popups inside of components such as Date and Time Pickers -- is causing a tough-to-fix containment bug where the Popups appear "cut off" by the boundaries of the Data Grid:
To Reproduce Steps to reproduce the behavior:
- Go to https://main.wc.design.infor.com/ids-data-grid/filter-books.html
- Click on the Date Picker in the "Pub. Date" column header
- When the Popup opens, notice it's cut off by the bottom of the data grid
Expected behavior The Popup should be completely visible (should break out of Datagrid's overflow). How we fix this isn't clear because it needs some exploration, but some ideas could be:
- We may need to make it possible for pickers/trigger fields to set a "context" element outside of their own boundaries where the Popup element physically exists. In 4.x we had an
attachToBody
setting for many pickers that would place Popups directly in the body tag. The downside to this would be Popups wouldn't have the same context for scrolling that the Picker/Trigger Field elements have, causing placement desyncs. - Maybe change how Data Grid overflow works (but this may have other impacts on Data Grid that I'm not sure of)
Additional context
- Somewhat related to #648
- Discussed this on #651
Solution as discussed for this is:
- make a
simple element - on open put it in here creating the container as needed
- move the menu back to its original location on close
- remove the container
- do this on an option (attach-to-body?)
Could also put it in ids-data-grid-wrapper but the dedicated container is probably better / more generic
In order to get the Date and Time pickers to follow the same strategy used to fix IdsPopupMenu in #954, we need to restructure the way they are containing their menus. This work is outlined in #958 and is required to finish this issue.
Also M3 reported a missing popup menu - but im not sure how they got it to pop on top. And i tried this and i didnt hit the issue. But mentioning here.
The bug still exists.
https://user-images.githubusercontent.com/102151352/211235198-f2012187-b0de-4960-96f3-17624d298b52.mov
Also, a broken image appeared before Canada under Location column
This may not have been deployed. The fix is working locally. Also the missing link is on purpose for testing an error situation.