fix(modal,flyout): dynamic elements did not reference

[lubber-de]

Description

Whenever a flyout or modal were dynamically created, the internal element has to be reassigned, otherwise it would always be body. This is especially important when mutationobservers or this-references in callbacks are used

[exoego]

LGTM

[mvorisek]

in Firefox this is causing a drag issue - when dragged a little bit, change is observed and the related refresh is causing the drag to stop, literally making any longer drag impossible

the problem is much more evident on 2nd or more drag, then the drag is stopped almost immediately

the fixed fiddle https://jsfiddle.net/lubber/jk31bLhg/ is also breaking modal in Microsoft Edge completely

[lubber-de]

@mvorisek
I am debugging this right now.

in Firefox this is causing a drag issue - when dragged a little bit, change is observed and the related refresh is causing the drag to stop, literally making any longer drag impossible

What kind of "drag" is affected? Could you provide an example? I already figured out that ff indeed breaks when the textarea of the given example jsfiddle reaches the viewport edge and gets stuck. This is caused by the scrolling class being set to modal and dimmer (still debugging how to fix it)
But from what you are mentioning, it seems to be something different you are "dragging"

the problem is much more evident on 2nd or more drag, then the drag is stopped almost immediately

Please provide a jsfiddle what/how you a dragging for reproducing. thx

the fixed fiddle jsfiddle.net/lubber/jk31bLhg is also breaking modal in Microsoft Edge completely

"completely" -> Please explain . I already figured out and fixed the input refresh by 702ec8b but beside that it works in Edge . So what is breaking "completely" for you? Could you provide a jsfiddle?

[mvorisek]

What kind of "drag" is affected?

by "drag" I mean dragging the bottom-right textarea corner (drag it vertically to stretch the textarea enough to enforce the Modal to be heigher than the browser viewport, then scrollbar on the right side of the browser is expected to be shown)

in Firefox, when I drag the textarea to stretch, the change seems to be observed almost immediately which causes the modal to be refresh and the drag is stopped - user cannot simply drag/stretch it in consequence

"completely" -> Please explain . I already figured out and fixed the input refresh by 702ec8b but beside that it works in Edge . So what is breaking "completely" for you? Could you provide a jsfiddle?

by "completely" I mean no modal is displayed at all, it seems attributeFilter: [ "style" ], is not supported by Edge

[lubber-de]

by "drag" I mean dragging the bottom-right textarea corner (drag it vertically to stretch the textarea enough to enforce the Modal to be heigher than the browser viewport, then scrollbar on the right side of the browser is expected to be shown)

in Firefox, when I drag the textarea to stretch, the change seems to be observed almost immediately which causes the modal to be refresh and the drag is stopped - user cannot simply drag/stretch it in consequence

ok, this only happens to me when the textarea gets too high while dragging, so are also referring to the textarea. thanks for clarification. i'll investigate

by "completely" I mean no modal is displayed at all, it seems attributeFilter: [ "style" ], is not supported by Edge

Ah...you meant old edge... already forgot about that :D ok, will fetch it . Thanks

[lubber-de]

I reverted my changes regarding additional attributes observer for now. I was not able to get this particular use case fixed. Even chrome beta seems to get annoyed when dragging the textarea. So lets check this later again. The remaining codechanges of this PR are still valid though