1

I'm trying to integrate the Google Picker in my application, and the UI is showing up perfectly as expected, but I can't seem to get it to call any callback I've tried attaching to it.

There are 2 ways of using the Picker, and I'd prefer option 1, but I'd be okay with either

Option 1: Build the Picker as a URL to render in a custom modal

I'm building my application in React (specifically Chakra), and I'd prefer to use Chakra's <Popover> element to help the Picker blend in with the rest of the page.

Using this route, this is the relevant code I have so far:

function getPicker(callback) {
  const view = new google.picker.DocsView(google.picker.ViewId.FOLDERS);
  view.setSelectFolderEnabled(true);

  return (
    new google.picker.PickerBuilder()
      .addView(view)
      .setSelectableMimeTypes("application/vnd.google-apps.folder")
      .setTitle("")
      .setCallback(callback)
      .enableFeature(google.picker.Feature.NAV_HIDDEN)
      .setOAuthToken(getAccessToken() /* defined elsewhere - assume this works */)
      .setDeveloperKey(process.env.API_KEY)
      .setOrigin(window.location.host)
      .toUri();
  );
}

// This is an event listener 
function showPicker() {
  function handleFolderSelected(folder) {
    const { Response, Action, Document } = google.picker;

    if (folder[Response.ACTION] === Action.PICKED) {
      const targetFolder = folder[Response.DOCUMENTS][0][Document.ID];
      // do stuff
    }

    setIsFolderPickerOpen(false); // closes the <Popover>
  }

  const pickerUrl = getPicker(handleFolderSelected);

  // Opens the <Popover> and sets the source of an iframe inside to the url
  setPickerUrl(pickerUrl);
  setIsFolderPickerOpen(true);
}

Option 2: Let the Picker build its own iframe

If necessary, although I don't think it's as visually appealing, I'm okay with going this route. This is the code I tried for this option so far (which is mostly the same, but not quite)

function getPicker(callback) {
  const view = new google.picker.DocsView(google.picker.ViewId.FOLDERS);
  view.setSelectFolderEnabled(true);

  return (
    new google.picker.PickerBuilder()
      .addView(view)
      .setSelectableMimeTypes("application/vnd.google-apps.folder")
      .setTitle("")
      .setCallback(callback)
      .enableFeature(google.picker.Feature.NAV_HIDDEN)
      .setOAuthToken(getAccessToken() /* defined elsewhere - assume this works */)
      .setDeveloperKey(process.env.API_KEY)
      .setOrigin(window.location.host)
      .build();
  );
}

// This is an event listener 
function showPicker() {
  function handleFolderSelected(folder) {
    const { Response, Action, Document } = google.picker;

    if (folder[Response.ACTION] === Action.PICKED) {
      const targetFolder = folder[Response.DOCUMENTS][0][Document.ID];
      // do stuff
    }
  }

  const picker = getPicker(handleFolderSelected);
  picker.setVisible(true);
}

Other information

I've tried searching Stack for this problem, but I haven't found anything specifically for this problem, so I don't think it's a duplicate. The closest I found was this one where a comment in an unaccepted answer suggests perhaps it's impossible to attach a callback via Option 1, but I can't be certain

I also noticed a couple times there was a message from the Picker being posted to the parent window when I expected the callback to be called, so I tried to catch it, but it wasn't being fired consistently enough.

Any help on this would be greatly appreciated!

piticent123
  • 193
  • 1
  • 7
  • 1
    does the line `.setCallback(callback)` isn't working ? – Ben.S Apr 21 '21 at 02:48
  • as far as I can tell, no. I've tried putting a `console.log(folder)` as the first line of the callback, and nothing ever gets logged in either version. – piticent123 Apr 21 '21 at 19:29
  • after some more testing, it seems that `.setCallback(callback)` works, but very sparingly. Like, I'm mashing my mouse on the select button, and it gets called after maybe 30-60 seconds, so I'd say my question remains the same. – piticent123 Apr 21 '21 at 20:42
  • I have posted an example on this previous question, https://stackoverflow.com/questions/66962609/how-to-get-a-blob-from-selected-files-on-googlepicker/66964765#66964765 - I have just fired up the example again, which uses `.setCallback()` and its pretty much instantaneous and fires every time. The example is adapted from the official [guide](https://developers.google.com/picker/docs). So it seems that `setCallback` is not the issue. Is there any way you can post an reproducible example? – iansedano Apr 22 '21 at 09:09
  • very interesting, I ran the demo you linked to, and it worked first try! Having a working example is very helpful though. I'll do some more poking around and post an answer when I figure out what was wrong – piticent123 Apr 23 '21 at 02:19

1 Answers1

1

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>
  );
}
piticent123
  • 193
  • 1
  • 7