Add an overlay to the html block preview to fix block selection in Firefox #20425
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
glendaviesnz
added
[Type] Bug
glendaviesnz
requested review from
ajitbohra,
jorgefilipecosta,
Soean and
talldan
as code owners
|
Size Change: +57 B (0%) Total Size: 866 kB
ℹ️ View Unchanged
|
youknowriad
reviewed
Feb 25, 2020
youknowriad
reviewed
Feb 25, 2020
Good question, hadn't thought about that, will have another look at it with that in mind. |
|
@youknowriad I modified it so the overlay is only in place if the block is not selected, once selected it is removed so that any click actions within the html block will still work. |
youknowriad
reviewed
Feb 26, 2020
| html={ attributes.content } | ||
| styles={ styles } | ||
| /> | ||
| { ! this.props.isSelected && ( |
There was a problem hiding this comment.
Can we maybe add a comment explaining why the overlay is needed (browser issue)
youknowriad
approved these changes
Feb 26, 2020
added 6 commits
February 27, 2020 10:02
glendaviesnz
force-pushed
the
fix/html-block-selection-bug
branch
from
886fa69 to
910dc7b
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In Firefox, if an html block is left in preview mode, it is very difficult to reselect the block except by clicking on the very bottom edge of the block - https://share.getcloudapp.com/9ZuArmrd.
It appears that the click events are not bubbling up from the sandboxed iframe, and the selection works on the bottom edge due to some padding/margin which is outside the extents of the iframe.
Fixes #12577
Description
This PR adds an overlay which covers the html preview area in order to prevent clicks being trapped in the sandboxed iframe
Before:
After:
How has this been tested?
Tested manually in Firefox and Chrome.
Types of changes
Adds additional HTML and CSS to html block
Checklist: