Dismiss PWA Action Sheet when using Camera Plugin in the Web

Capacitor
#1

Hi, I’m using the Capacitor Camera Plugin in the web using PWA elements.
Is there a configuration to dismiss the action sheet when clicking on the backdrop?

I saw that <pwa-action-sheet> has an attribute cancelable that I could set to "true" in order to solve my problem… I’m trying to find the way to access to it.

As you can see in the screenshot below, there is no way to cancel or go back and clicking on the backdrop does nothing.

Screen Shot 2022-04-06 at 10.30.59
Screen Shot 2022-04-06 at 10.30.59772×1688 36.8 KB

#2

What did you do to get that screen to appear?

In Simon Grimm’s tutorial the screen is quite different - it is probably an older version?

#3

I’m using the default implementation with the latest versions of everything.

#4

Hello @dayanajabif , did you find something please ?

I have the same issue as you.

Thank you

#5

Hi, I did a workaround. Try adding the following code when clicking on your button that opens the camera component:

    // workaround to cancel the camera action sheet on PWA
    if (Capacitor.getPlatform() === 'web') {
      const actionSheet = document.createElement('pwa-action-sheet');
      document.body.appendChild(actionSheet);
      actionSheet.addEventListener('click', () => {
        actionSheet.setAttribute('style', 'display:none');
        actionSheet.parentNode.removeChild(actionSheet);
      });
    }