-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Embed: fix select on focus #29431
Embed: fix select on focus #29431
Conversation
Size Change: -81 B (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
I tried to write an e2e test, but I can't emulate clicking in an iframe that is loading another web page. |
@mcsf What browser are you using? It seems to work fine for me. |
I think #29892 is affecting testing here too. |
59fb2ff
to
748be3e
Compare
@mcsf I rebased the PR. Does it work correctly now? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tested it on Chrome and Safari and it's working.
Two things though (not necessarily blockers):
- I can't see the blue border when selecting the block with the mouse. And, because of that, I guess, I can't remove the block by pressing delete.
- I'm not sure if we have some kind of polyfill or something, but the
FocusEvent
constructor doesn't work on IE11. It's better if we can just useactiveElement.focus()
.
// The focus event should *not* bubble: | ||
// https://w3c.github.io/uievents/#event-type-focus | ||
activeElement.dispatchEvent( new FocusEvent( 'focus' ) ); | ||
|
||
// The focusin event *should* bubble: | ||
// https://w3c.github.io/uievents/#event-type-focusin | ||
activeElement.dispatchEvent( | ||
new FocusEvent( 'focusin', { bubbles: true } ) | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can't we just do this?
// The focus event should *not* bubble: | |
// https://w3c.github.io/uievents/#event-type-focus | |
activeElement.dispatchEvent( new FocusEvent( 'focus' ) ); | |
// The focusin event *should* bubble: | |
// https://w3c.github.io/uievents/#event-type-focusin | |
activeElement.dispatchEvent( | |
new FocusEvent( 'focusin', { bubbles: true } ) | |
); | |
activeElement.focus(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was first introduced in 5730. I didn't think it would work, but it does. The right window seems to stay focussed and I can keyboard navigate as you would expect.
748be3e
to
5f11360
Compare
iframe.dispatchEvent( focusEvent ); | ||
|
||
if ( onFocus ) { | ||
onFocus( focusEvent ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We no longer need this since React will fire the right handlers when the element receives focus.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note that React will even call the right handlers with new FocusEvent
. I'm not sure why this was ever added, but it was assumed React wouldn't pick it up.
Once this is approved and merged, I'll rebase #26753 to make this API better and reduce duplication. |
Ok, merging since the intention of this PR is fulfilled. I'll have a look into why Backspace is not removing the embed separately. |
Description
Fixes #29374. We switched to using the
focusin
event type instead offocus
for detecting block selection.How has this been tested?
Screenshots
Types of changes
Checklist: