Images alignment do not behave consistently in the UI on IE 11

[ajsampang67]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When adding an image, an inital toolbar will pop up for alignment. Selecting one of these alignments will incorrectly highlight a blue box filling the editor area, and will not highlight which alignment is selected in the toolbar.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

1. Add a picture to the beginning of the test content (same line)
2. When image is added, the alignment text box will appear. Click center
   **Important if clicking elsewhere first, the issue will not reproduce

What is the expected behavior?
The image would center, with the floating menu UI showing that the selected content is centered and no blue box extending all the way across the content section

Which versions of alloy-editor, and which browser / OS are affected by this issue? Did this work in previous versions?
IE11 only, all versions of alloy-editor. Unknown if it worked in previous versions.

[julien]

Hi @ajsampang67,

Thanks for reporting this.

I tried reproducing the issue you described but I'm not really sure if this exactly what you mean, please have a look at the following .gif image

I'm inserting an image and hitting the "enter" key before trying to align the image, which will move the cursor "outside" of the image so I'm not sure if this should be considered as a bug.

[ajsampang67]

Hi @julien ,
No need to hit enter; as in the steps, once the image is added, that toolbar appears above the image (as in your gif). At this point, you should click "center" on that toolbar. Just as well in the note, you should not click anywhere else (or hit enter) before selecting the "center".

Here, I center it twice. First demonstrates the toolbar issue, where the toolbar will stay back in the original position and the center button is not highlighted. Second demonstrates the center outline, which should not be stretching across the editor, but only outlining the image (as shown in firefox/chrome)

Here is the expected for quick reference:

[julien]

Hi @ajsampang67,
Thanks for the reply.

Concerning the image alignment button issue I sent PR #1185 which fixes the problem.
Concerning the "center outline" I don't think this is an issue.

[ajsampang67]

Wonderful, thanks for the quick fix!

@julien good to close then?

[julien]

@ajsampang67 no problem.
Concerning closing the issue, I'd rather do it once it's merged if you don't mind.
Thanks

[ajsampang67]

Hi @julien,

I've tested with the updated version and issue is still reproducible:

[julien]

Hi @ajsampang67 ,

Thanks for the update,

I tried this too but on the alloy-editor demo as you can see in the following .gif

I'll look into this when I have the time and keep you updated, for issues related to liferay-portal it might be a better idea to create an issue on Jira ticket.

Thanks

[julien]

Hi @ajsampang67,

Just wanted to tell you I also tested this in liferay-portal and as far as I can see it's working as expected, please see the attached .gif

[ajsampang67]

Hi @julien,
Looking back at the original steps, in step 2 there is an asterisked note saying "If clicking elsewhere first, the issue will not reproduce". It looks like in your reproduction, you're clicking near the bottom right of your screen, resulting in the initial menu disappearing. This will result in the issue not reproducing.
Here is my example: First I'll upload the image and click elsewhere, having the issue no longer reproducible. Second time, I will directly click the toolbar as soon as it shows up, reproducing the issue: