material-web: mwc-select does not work properly inside a mwc-dialog
I’m submitting a:
- bug report
- feature request
What OS are you using? Kubuntu
What browser(s) is this bug affecting: Current Chrome
Current behavior: mwc-select does not work inside a mwc-dialog. It’s menu displays inside the dialog’s content pane and makes it grow / show scrollbars.
Expected behavior: the menu should display above the dialog
Steps to reproduce: Open a dialog with a select with lots of items in it.
Related code:
<mwc-dialog id="dialog" title="Dialog">
<form>
<mwc-select>
<mwc-list-item>01</mwc-list-item>
<mwc-list-item>02</mwc-list-item>
<mwc-list-item>03</mwc-list-item>
<mwc-list-item>04</mwc-list-item>
<mwc-list-item>05</mwc-list-item>
<mwc-list-item>06</mwc-list-item>
<mwc-list-item>07</mwc-list-item>
<mwc-list-item>08</mwc-list-item>
<mwc-list-item>09</mwc-list-item>
<mwc-list-item>10</mwc-list-item>
<mwc-list-item>11</mwc-list-item>
<mwc-list-item>12</mwc-list-item>
<mwc-list-item>13</mwc-list-item>
<mwc-list-item>14</mwc-list-item>
<mwc-list-item>15</mwc-list-item>
<mwc-list-item>16</mwc-list-item>
<mwc-list-item>17</mwc-list-item>
<mwc-list-item>18</mwc-list-item>
<mwc-list-item>19</mwc-list-item>
</mwc-select>
</form>
<mwc-button slot="primaryAction" @click=${this._save}>Speichern</mwc-button>
</mwc-dialog>
Other information:
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 11
- Comments: 19 (9 by maintainers)
Commits related to this issue
- fix(editors/templates): adopt mwc-select fixedMenuPosition as a workaround for https://github.com/material-components/material-components-web-components/issues/832 — committed to openscd/open-scd by ca-d 3 years ago
- feat(templates): add DAType basic manipulation capability (#201) * feat(datype-editor): add default DAType's to template.xsd * feat(templates): add read only DAType filtered list * feat(templat... — committed to openscd/open-scd by JakobVogelsang 3 years ago
Periodic update that we haven’t forgotten about this issue and still expect to have a solution down the line for this before 1.0.0
Hello, this should not be happening. In the workaround where you set fixedMenuPosition on the mwc-select, it should appear on the screen correctly when interacted with. If the Dom is scrolled or the window resized whilst the select’s menu is open, then the menu will remain in its current position.
If the menu is closed, and the select opens it again, the menu should be correctly positioned again.
This is a big difference between fixed and absolute positioning.
The behavior you’re describing seems to describe an absolute positioned menu
Hello, a small update. On the canary channel we have implemented
fixedMenuPositiononmwc-selectwhich basically automatically does the workaround I described.Not closing issue as we still want to eventually solve the menu hoisting issue
Is there an update on this please?
Unfortunately using fixed casues another host of behavioral problems. We are yet still working on a fix for this which is to implement an element hoisting system. It’s just unfortunately stuck behind some upstream internal work.
If it currently works for your use case, I say go ahead and subclass select for now and apply the fixed property for menu for now.
We can use an
<mwc-menu fixed>inside an<mwc-dialog>without encountering this issue, the menu renders correctly above the dialog that triggered it.Seeing as
<mwc-select>uses aMenuinternally, could you maybe expose thefixedproperty through theSelectAPI as a solution?Edit: I just tried making the internal
<mwc-menu>in theSelect’s shadow domfixedusing chrome dev tools, which makes it extend across dialog boundaries as expected.Update: this is still being worked on both upstream in MDC and in this repo. Unfortunately no PRs to track for now. This issue is still a good place to track