MediaUpload selection results in white screen when launched from a Modal.

[hgezim]

Describe the bug
If you use Modal and have a MediaUpload component popup, when you select the image, the component goes blank (all white) and both modals are not recoverable.

To Reproduce
Steps to reproduce the behavior:

1. Create a block with the following component in edit:

edit: withState ({
    isOpen: false,
    mediaId: null,
  }) (({isOpen, mediaId, setState}) => {
    return (
      <div>
        <Button isDefault onClick={() => setState ({isOpen: true})}>
          Open Modal
        </Button>
        {isOpen
          ? <Modal
              title="This is my modal"
              onRequestClose={() => setState ({isOpen: false})}
            >
              <MediaUploadCheck>
                <MediaUpload
                  onSelect={media => console.log ('selected ' + media.length)}
                  render={({open}) => (
                    <Button onClick={open}>
                      Open Media Library
                    </Button>
                  )}
                />
              </MediaUploadCheck>
            </Modal>
          : null}
      </div>
    );
  }),

2. When you load the block, click Open Modal
3. Click Open Media Library
4. Select an image by clicking it.

Expected behavior
It should not show a white screen in the modal when the image is selected.

Screenshots

Desktop (please complete the following information):

• OS: Mac OS 10.14.1 (18B75)
• Browser: Firefox
• Version 63.0.3 (64-bit), 64.0 (64-bit) and Safari Version 12.0.1 (14606.2.104.1.1)

Additional context
Gutenberg version with WP 5.0

[pippaink]

I am experiencing the same issue. My case however is inside . If I move the MediaUpload code to outside the Dropdown it works. Inside Dropdown I get a blank screen on image select or upload. It seems whenever MediaUpload is used inside other components it breaks.

There are no javascript console errors. The HTML output is empty for the media modal.
<div class="media-modal-content"></div>

• OS: Mac OS 10.14.1
• Browser: Chrome Version 72.0.3626.109 (Official Build) (64-bit)

[hos-shams]

Same here when MediaUpload is inside Dropdown.

[davilera]

Me too, I have the exact same problem as @shamsoft’s

[davilera]

I think I know what's amiss (even though I have no idea on how to fix it). When I click on the MediaUpload, I'm actually clicking outside the Dropdown, which closes the Dropdown and, therefore, destroys the MediaUpload... or something like that.

[talldan]

I can confirm what @davilera mentions having noticed similar before. It's this bit of code that does that:

gutenberg/packages/media-utils/src/components/media-upload/index.js

Lines 346 to 348 in 5d7bd8b

	componentWillUnmount() {
	this.frame.remove();
	}

A way to stop it would be to stop the modal behind the uploader from closing.

It might be possible to check whether the event that triggers closing happened inside the media uploader and then avoid closing the modal if that's the case.

The callback passed to onRequestClose receives the event as an argument:
https://github.com/WordPress/gutenberg/blob/master/packages/components/src/modal/frame.js#L97

So hopefully it's possible to do something like this would work:

onRequestClose={ ( event ) => {
  if ( event.target.closest( '.media-frame' ) ) {
    return;
  }

  // else close the modal
} }

Though note that closest isn't supported in IE.

For dropdowns/popovers I'm not sure if there's something similar.

[manzoorwanijk]

Facing the same issue, any update?

[aurooba]

Can confirm I'm seeing the same issue. Would love to see this resolved in core!

[talldan]

Revisiting this, I think the main issue is that the MediaUpload works the way it does:

<MediaUpload
  onSelect={media => console.log ('selected ' + media.length)}
  render={({open}) => (
    <Button onClick={open}>
      Open Media Library
    </Button>
  )}
/>

Having to render the opener button in a render callback is the problem. That forces you to render MediaUpload as a child of the Modal to make the button appear there, whereas it should instead be a sibling.

If it worked like a regular Modal component it'd be better:

edit: withState ({
  isOpen: false,
  isMediaLibraryOpen: false,
  mediaId: null,
}) (({isOpen, mediaId, setState}) => {
  return (
    <div>
      <Button isDefault onClick={() => setState ({isOpen: true})}>
        Open Modal
      </Button>
      {isOpen
        ? <Modal
            title="This is my modal"
            onRequestClose={() => setState ({isOpen: false})}
          >
            <MediaUploadCheck>
              <Button onClick={() => setState({isMediaLibraryOpen: true })}>
                Open Media Library
              </Button>
            </MediaUploadCheck>
          </Modal>
        : null}
      { isMediaLibraryOpen && 
        <MediaUpload
          onSelect={media => console.log ('selected ' + media.length)}
        />
      }
    </div>
  );
})

That said, I think anyone reading can implement the steps mentioned in this comment or in my previous comment to work around it, though on that other issue it was mentioned there might also be z-index problems.

I think there's a question over how much value there is in solving this one this given a media library rework is on the cards in the very near future - #55238. Though there may be a requirement to make MediaUpload work in a future compatible way that's more like a modal if it remains the way to open the new media library.