AUI Inline Dialogs in AUI Forms in AUI Modal Dialogs are clipped (oh my)

Description

Hi !disturbed, there’s a funny interaction that happens with dialog2, inline dialog and forms since AUI 9.

When an inline dialog is placed inside a form which is inside of a dialog2 with content that is larger than the modal, it causes the dialog2 to become scrollable for the inline dialog rather than the inline dialog spilling outside of the dialog2. A bit hard to explain in words so it’ll probably make more sense with this Codepen: <https://codepen.io/shouheiyamauchi/pen/mdRBaEB>

Root cause for this behaviour is due to:
1. `&lt;form class="aui"&gt;` being `position: relative;`
2. `aui-inline-dialog` are now being rendered where it is placed in the HTML unlike in &gt;= AUI8 where they were placed as a child of the root node so it will interact with the styling above
Easy solution is simply placing the `aui-inline-dialog` outside of the form and live with this edge case (example for the solution also included in the Codepen)? Or does a fix need to be worked on in AUI. Here’s the original ticket that sparked this investigation: <https://ecosystem.atlassian.net/browse/DEVHELP-5970>

I just need to know what message we need to relay onto plugin developers who are running into this issue.

Thanks!


DoD

Need to investigate why the offending CSS rule is there, then understand the consequences of changing it.

It is unclear whether the correct course of action is to change the CSS rule, or to close this issue as “Won’t Fix” with a suggested workaround.

Environment

None

QA Kickoff Check-In

Usage described in documentation
Demonstration of all states
Interactive state (screen readers)
Visual regression tests
Unit tests
Navigation (only keyboard / only mouse)
Component render legibly

QA Demo Check-Out

P2 plugin
Browsers (Edge/IE11/Firefox/Chrome/Safari)
Resizing
Zoom in/out
Navigation (Keyboard/Mouse)
Focus
Element status (At Rest/Pressed/Selected/Read Only/Disabled)
Cursors
Tooltips
Audio

Activity

Show:
Halp
April 8, 2021, 5:51 AM

[On behalf of @shouhei.yamauchi] Okay sure, I’ll test it out and see how that goes.

Halp
April 8, 2021, 5:51 AM

[On behalf of @daz] you can try it, but I cannot guarantee that won't break more than it fixes

Halp
April 8, 2021, 5:41 AM

[On behalf of @shouhei.yamauchi] Thanks for looking into this @daz. Maybe as a temporary mitigation for this issue, I should just add a CSS to override the form styling inside modals like below in confluence server utilising AUI 9?: ```.aui-dialog2-content form.aui { position: initial; }```

Halp
April 8, 2021, 5:08 AM
Edited

I've raised the root cause here: <https://ecosystem.atlassian.net/browse/AUI-5354>

Halp
April 8, 2021, 4:51 AM

[On behalf of @daz] I do not recall if there is a backlog ticket for the general problem. I will look and also create one if it does not exist.

Assignee

Gerardo Leal

Reporter

Halp