CanopyTax/bandicoot

Microsoft Edge bugs with lists

Closed this issue · 12 comments

Microsoft Edge seems to be surfacing strange bugs with lists. The styling of the buttons are affected when I click ordered/unordered lists.
codesandboxlist
https://codesandbox.io/s/fervent-brattain-f1100

started noticing this here... although it is interesting it's not happening everywhere we are using RTE with buttons. Trying to figure out the difference... canopylist

canopylistsmiley
some vanishing icons styling that I need to work through on our end. However, we're not changing any state that should affect mounted components. Why the DOM is changing is confusing and why clicking a list triggers said change is a mystery far beyond me...

bottom
interestingly this problem does not exist if it's on bottom, just having the usual strange experiences in edge of clicking buttons unfocusing the RTE

I'm watching this, let me know if you want me to jump in to help diagnose

I'm at a loss as to why the calls bandicoot is making would affect any styling... it seems absolutely ridiculous to suggest, but my only guess is that bandicoot is somehow interrupting/stunning the render/layout of Edge?

Why would this change depending on if the buttons are first or second children of <RichTextContainer>? I'm not sure. What do you think Joel?

I have no idea, especially with it being Edge-specific.

I'll keep this in my github notifications and if i get a sec i'll open up my windows laptop and look

it seems to be an issue with the svg tag: <use /> in edge... it looks like edge is losing the shadow root rendering somehow 🤷‍♀

I'll keep on looking into it...

I did not mean to close this... whoops

Canopy's svgs all of a sudden getting lost when clicking lists is just a part of the broader issue of invoking execCommand('inserOrderdedList') in Edge. We've already found a workaround for those svgs (geoctrl is experimenting for a better workaround). We need to figure out why Edge is having unintended styling issues in the first place.

Found what seems to be a useful solution with geoctrl. Including a block level element right before closing <RichTextContainer/> seems to solve all known problems #70. Is there a better way you can think of to proceed Joel?
https://codesandbox.io/s/dreamy-maxwell-7qml9

I am unable to reproduce the bug on Edge 18.18362. Here's a gif from https://codesandbox.io/s/fervent-brattain-f1100.

edge-bandicoot

unorderedlist
Microsoft EdgeHTML 17.17134
Microsoft Edge 42.171

Good catch Joel. My PC is out of date. Canopy supports last 3 major versions of Edge. I believe this means 18204, 17723 and 17713 42, 43, 44 (EdgeHTML is the rendering layout engine I think?)

Should we just have consumers of Bandicoot provide their own block level element if support for earlier edge needed?