Show Google Picker Inside/Over Modal

How do I attach a callback to the Google Picker in a Chakra UI Modal?

The problem, as it turns out, was not Google Picker (thank you to iansedano for pointing me to a working example to work off of!)

The problem is that, for accessibility reasons, Chakra UI traps focus in modals. This is ordinarily a good thing, but due to how the Picker works, every time you try to click the "pick file" button, Chakra steals the focus back to the modal's close button before the Picker can handle the click.

The solution is to use the following property to "untrap" the focus. Note: I recommend doing this only temporarily while the Picker is open. In all other cases, focus trapping is a good thing.

import { Modal } from "@chakra-ui/react"

function Component() {
  return (
    <Modal trapFocus={false}>
      ...
    </Modal>
  );
}

Google File Picker Dialog no iframe

Publish your own custom dialog as a WebApp

Since your implementation is an Add-on, you can open the WebApp-dialog by clicking on a button from the Add-on sidebar.

Sample:

 <button id="portal" onclick="window.open('https://script.google.com/macros/s/XXX/exec', '_blank')" id="myButton" >open Picker in a custom WebApp dialog</button>

Whereby https://script.google.com/macros/s/XXX/exec is the deployment URL of your WebApp.

For the WebApp itself, replace

function showPicker() {
  var html = HtmlService.createHtmlOutputFromFile('PickerHTML2.html')
      .setWidth(600)
      .setHeight(425)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showModalDialog(html, 'Select a file');
}

through

function doGet() {
   var html = HtmlService.createTemplateFromFile('PickerHTML2.html')
   return html.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

and deploy the code as a WebApp.

Related Topics