Shopify + LastPass Passkey popup blocked by modal dialog (Mac + Chrome) - Workaround

Technical Q&A
1

I got stuck trying to verify my Shopify account to add a payment provider.

Environment

  • macOS
  • Chrome
  • LastPass extension
  • Shopify Accounts (passkey verification)

Problem

Shopify opens a <dialog> asking to verify your account.

At the same time, the LastPass passkey popup appears behind the modal dialog. The popup is visible but cannot be clicked because the dialog’s modal backdrop intercepts all pointer events.

Removing the dialog from DevTools allows clicking the LastPass popup, but Shopify then loses the dialog it is waiting for and the flow cannot continue.

Workaround

Instead of deleting the dialog, convert it from a modal dialog to a modeless dialog.

Open DevTools Console:

const d = document.querySelector(‘dialog’);
d.close();
d.show();

This removes the blocking backdrop while keeping the dialog alive.

Complete the LastPass verification.

Return to the Shopify dialog and continue the verification flow.

Afterward I removed the old LastPass passkey and created a new Apple/iCloud passkey.

I think this is a bug caused by the interaction between Shopify’s modal <dialog> and the LastPass passkey extension.

2

Nice find, and your diagnosis is right, a modal dialog (showModal) puts everything else on the page behind an inert backdrop, so the LastPass popup is visible but can’t receive clicks, and flipping it to modeless with show() drops the backdrop while keeping the dialog Shopify is waiting on alive. Clever workaround.

And since it’s a bug in how Shopify’s modal dialog and the extension interact, it’s worth reporting on community.shopify.dev where Shopify’s dev team actually engages, which is more likely to get it looked at than Technical Q&A board here.

Best,
Moeed