Skip to content

Cannot focus on input element inside iframe when the editor has focus. #167

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.

Sign up for GitHub

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

Jump to bottom
Closed
tomoam opened this issue Dec 22, 2022 · 0 comments · Fixed by #168 or #190
Closed

Cannot focus on input element inside iframe when the editor has focus. #167

tomoam opened this issue Dec 22, 2022 · 0 comments · Fixed by #168 or #190

Comments

@tomoam
Copy link
Contributor

tomoam commented Dec 22, 2022

Describe the problem

Cannot focus on input element inside iframe when the editor has focus.

focus_issue_480p.mov

This is probably related to #161.
I suppose the intent of #161 is to consider pointerdown event as a human operation. However, events that occur inside iframe cannot be handled from outside iframe.

learn.svelte.dev/src/routes/tutorial/[slug]/Editor.svelte

Lines 243 to 249 in 8d0376c

<svelte:window
on:pointerdown={(e) => {
if (!container.contains(/** @type {HTMLElement} */ (e.target))) {
preserve_focus = false;
}
}}
/>

learn.svelte.dev/src/routes/tutorial/[slug]/Editor.svelte

Lines 266 to 272 in 8d0376c

on:focusout={() => {
if (preserve_focus) {
setTimeout(() => {
instance?.editor.focus();
}, 0);
}
}}

Describe the proposed solution

when body element inside iframe gets focus, set focus on the editor. (using postMessage)

https://github.com/tomoam/learn.svelte.dev/blob/e291cb8c0d08f011d358427f7990fe7f2e6257d3/content/tutorial/common/src/__client.js#L93-L106

https://github.com/tomoam/learn.svelte.dev/blob/e291cb8c0d08f011d358427f7990fe7f2e6257d3/src/routes/tutorial/%5Bslug%5D/Editor.svelte#L236-L242
@tomoam tomoam mentioned this issue Dec 22, 2022
Merged
dummdidumm added a commit that referenced this issue Dec 22, 2022
@tomoam @dummdidumm
[fix] focus management between editor and iframe (#168)
9c9656b 
Fixes #167

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Rich-Harris added a commit that referenced this issue Jan 23, 2023
@Rich-Harris
revert #168, fix #167
24a31d2
@Rich-Harris Rich-Harris mentioned this issue Jan 23, 2023
Merged
dummdidumm pushed a commit that referenced this issue Jan 24, 2023
@Rich-Harris
revert #168, fix #167 (#190)
00892b4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
1 participant
@tomoam