Inputs in Custom Modal lose focus to the editor in the background

[jrmd]

Describe the bug
Wordpress 4.9.6
Gutenberg 2.9.1

I have created a custom block that opens a modal (for data editing) however, when trying to focus on an input the editor sometimes takes focus away from the input and highlights blocks in the background, this isn’t a consistent thing and doesn’t happen 100% of the time

To Reproduce

1. Create custom block that opens a custom modal
2. Have form elements in this modal
3. Try click a label/Input

Expected Behaviour
Mouse events don’t pass down to the editor and lose focus

Screenshot
Video: Screen Capture on 2018-05-21 at 10.58.37.mov • Droplr

Desktop

OS: Mac/Windows
Browser: Chrome/Firefox
Version: Latest on Chrome/ Nightly on Firefox

[danielbachhuber]

Hi @jrmd,

Thanks for the report. This will be a hard bug to fix without steps to reliably reproduce. Can you do more debugging on your end to see if you can track down the source?

[jrmd]

Thanks for the reply @danielbachhuber
I will certainly look in to it :)

Could the issue be caused by my modal markup being inside of the block? Im not exactly sure how the highlighting of blocks work but I'm assuming a mousedown and mousemove event on the editor that grabs blocks that are within the coordinate range and applies focus to them ignoring the modal on top?

[jrmd]

I decided to try this without any form elements and just a semi-transparent overlay on the content and if i click and drag around, it still selects the blocks; So it sounds like my theory above could be correct.

[danielbachhuber]

This sounds like it could be it. Can you share some example code that reproduces the issue?

[jrmd]

hey @danielbachhuber here is a demo block that will produce the same results - https://gist.github.com/jrmd/920e6c2c682ec46a7f9613733a75b5bc

If you add a few extra blocks into your page then toggle the overlay you should be able to highlight them through the overlay

[danielbachhuber]

Thanks @jrmd

[youknowriad]

The issue I think is that the block is rendering the modal inline where in general we render modals outside of the current divs. Did you try using wp.components.Popover or react-modal?

[jrmd]

@youknowriad

I do believe that would be the issue; however it would be nice to resolve it in someway or perhaps better document how to do this.

Regarding react-modal is it as simple as npm installing the package and using their docs to create one?

[youknowriad]

Agreed, it would be good to find out why this behavior is happening and whether it's legit or not.

But yeah as a workaround try using react-modal and yes, it's as simple as they say :)

[jrmd]

Thanks for the help @youknowriad :)

[jrmd]

@youknowriad So I got time to test react modal and i still get the same issue; so it seems it being inside the content isn't the issue

[youknowriad]

Thanks for the tests, this will help debugging.

[brandonpayton]

Tested with react-modal and confirmed this is still an issue.

In this example, the first click focuses the input in the modal, and subsequent, single clicks trigger the selection of the underlying image block.

[mtias]

Is this also the case with our internal modal wrapper?

[paaljoachim]

Hey @jrmd Jerome and others.
It would be nice with an update on this issue.
Thanks!

[paaljoachim]

@youknowriad Is this something you can take a closer look at in your work on modals?
Here is one PR being worked on: #28574

[x029a]

In-house Design System Modal
https://user-images.githubusercontent.com/2062218/111016082-bf07f180-8360-11eb-91fd-c1da908192d2.mp4

Gutenberg Modal
https://user-images.githubusercontent.com/2062218/111016798-a3064f00-8364-11eb-9649-9c2ddf3705e0.mp4

Interesting. I'm making heavy use of formatting, html-to-react, and a custom renderer to convert certain formatting to react components at run time.

Within a modal of any kind, I can't seem to get a RichText box to work. Immediately upon clicking, focus is restored to the core editor instance. No toolbar either (the toolbar in the video is literally just a <ToolBar /> not the formatting options I'd expect implicitly with a RichText.

In the above example when typing into one of the inputs, they're setting attributes for a format that's being applied. This pattern works really well for me, however I'd like to apply formatting further, to those attributes. Think <my-tag data-my-attr='<strong>Test</strong>'> Foo </my-tag>. My renderer pulls these out and replaces them with react components.

My idea was to use a RichText as the input, but the above happens.

I've scoured for solutions, applied fill and slot and can't seem to keep focus. In theory if I could just use a RichText area with all of my standard formatting options in a modal it would work.

This issue seemed related so I figured I'd pile on a bit :)

Apologies if this is not related. @youknowriad, @paaljoachim, @mtias any thoughts?

[youknowriad]

Hey there! old issue here, I've been trying to test the original reported issue and in my testing I can't click through the overlay using the gist provided here #6870 (comment) So I guess this might be fixed?

[youknowriad]

Closing as no replies, but feel free to reopen a new issue if you still experience the issue.