fix: suppress WebView JS dialogs when browser screen loses focus

[joaoloureirop]

Description

WebView JS dialogs (alert/confirm/prompt) were only suppressed for inactive tabs, but could still appear on top of modals or other screens drawn over the browser.

This adds useIsFocused to gate dialog visibility on both tab state and screen focus, so dialogs are suppressed whenever the browser screen is not in the foreground.

See recordings and notice that After does not show the alert on top of the confirmation screen

(Seems that GitHub trimmed the video to 8 seconds. The original length is 16 seconds.)

Changelog

CHANGELOG entry: fix: supress js dialogs when page is not focused

Related issues

Fixes: https://github.com/MetaMask/mobile-planning/issues/2312

Manual testing steps

See issue linked above

Screenshots/Recordings

Before

webview.alert.mov

After

webview-no-alert.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: FlaskBuildTests, SmokeNetworkExpansion, SmokeMultiChainAPI, SmokeNetworkAbstractions, SmokeConfirmations, SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
The change modifies BrowserTab.tsx to add useIsFocused() from @react-navigation/native, creating a new canShowJsDialogs = isTabActive && isBrowserScreenFocused condition. Previously, JS dialogs were only suppressed when the tab was inactive; now they are also suppressed when the browser screen is not focused (e.g., when a modal or confirmation screen is drawn on top).

BrowserTab is a shared, central component used by virtually all dApp-related test flows. The behavioral change to JS dialog suppression affects:

1. FlaskBuildTests: Snap dialog tests directly test snap_dialog functionality in the browser (test-snap-dialog.spec.ts). The change to when JS dialogs are shown/suppressed is directly relevant to snap dialog behavior. Snaps also use the browser for all their interactions.

2. SmokeNetworkExpansion: dApp connect/disconnect flows, Solana wallet standard compliance tests, and multi-chain provider tests all use the browser. When permission modals appear over the browser, the new isBrowserScreenFocused logic kicks in.

3. SmokeMultiChainAPI: CAIP-25 session API tests (wallet_createSession, wallet_getSession, etc.) use the browser to connect dApps and manage permissions - modals appear over the browser during these flows.

4. SmokeNetworkAbstractions: Chain permission system for dApps uses the browser; permission grant/revoke modals appear over the browser.

5. SmokeConfirmations: dApp-initiated transaction/signature confirmations open confirmation screens on top of the browser. With the new logic, JS dialogs from the dApp would be suppressed while the confirmation is showing - this is the intended behavior but needs verification.

6. SmokeWalletPlatform: EVM provider event handling (accountsChanged, chainChanged) for dApp communication uses the browser.

No performance tests are needed as the change is minimal (one hook call + boolean computation with negligible overhead).

Performance Test Selection:
The change adds a single useIsFocused() hook call and a boolean computation (canShowJsDialogs = isTabActive && isBrowserScreenFocused). This is negligible overhead with no meaningful performance impact on rendering, data loading, or any measured user flows.

View GitHub Actions results

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
17 value mismatches detected (expected — fixture represents an existing user).
View details

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud