From 28449caf2ed918a72c36b82ecb73e7320ca02972 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Thu, 24 Sep 2026 09:15:09 +0000
Subject: [PATCH] Redesign: Fix virtual keyboard not showing on Safari iOS when
 opening the Explore page (#40679)

---
 .../features/navigation_panel/redesign/index.tsx |  2 ++
 .../navigation_panel/redesign/mobile_nav.tsx     |  2 ++
 .../utils/invoke_virtual_ios_keyboard.module.css |  9 +++++++++
 .../utils/invoke_virtual_ios_keyboard.ts         | 16 ++++++++++++++++
 4 files changed, 29 insertions(+)
 create mode 100644 app/javascript/mastodon/utils/invoke_virtual_ios_keyboard.module.css
 create mode 100644 app/javascript/mastodon/utils/invoke_virtual_ios_keyboard.ts

diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
index fb99c05478c..b60157c6647 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
@@ -27,6 +27,7 @@ import { openNewComposer } from '@/mastodon/reducers/slices/composer';
 import { getOrderedLists } from '@/mastodon/selectors/lists';
 import { selectUnreadNotificationGroupsCount } from '@/mastodon/selectors/notifications';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
+import { invokeVirtualIosKeyboard } from '@/mastodon/utils/invoke_virtual_ios_keyboard';
 
 import { NavigationAccountCardAndMenu } from './account_card_and_menu';
 import { NavigationFooterLinks } from './footer_links';
@@ -151,6 +152,7 @@ export const RedesignNavigationPanel: React.FC<{
                 state: { focusTarget: FOCUS_TARGET.SEARCH },
               }}
               iconComponent={MagnifyingGlassIcon}
+              onClick={invokeVirtualIosKeyboard}
             >
               <FormattedMessage
                 id='tabs_bar.explore'
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx
index 18b0cd5397a..66c79cf8050 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx
@@ -25,6 +25,7 @@ import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useIdentity } from '@/mastodon/identity_context';
 import { selectUnreadNotificationGroupsCount } from '@/mastodon/selectors/notifications';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
+import { invokeVirtualIosKeyboard } from '@/mastodon/utils/invoke_virtual_ios_keyboard';
 
 import { RedesignNavigationPanel } from '.';
 import { AccountMenuItems } from './account_card_and_menu';
@@ -59,6 +60,7 @@ export const RedesignMobileNavigation: React.FC = () => {
                 state: { focusTarget: FOCUS_TARGET.SEARCH },
               }}
               iconComponent={MagnifyingGlassIcon}
+              onClick={invokeVirtualIosKeyboard}
             >
               <FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
             </MobileNavLink>
diff --git a/app/javascript/mastodon/utils/invoke_virtual_ios_keyboard.module.css b/app/javascript/mastodon/utils/invoke_virtual_ios_keyboard.module.css
new file mode 100644
index 00000000000..008937b5ecd
--- /dev/null
+++ b/app/javascript/mastodon/utils/invoke_virtual_ios_keyboard.module.css
@@ -0,0 +1,9 @@
+.dummyInput {
+  position: absolute;
+  top: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  font-size: 16px;
+  opacity: 0.01;
+}
diff --git a/app/javascript/mastodon/utils/invoke_virtual_ios_keyboard.ts b/app/javascript/mastodon/utils/invoke_virtual_ios_keyboard.ts
new file mode 100644
index 00000000000..a97102c91fd
--- /dev/null
+++ b/app/javascript/mastodon/utils/invoke_virtual_ios_keyboard.ts
@@ -0,0 +1,16 @@
+import classes from './invoke_virtual_ios_keyboard.module.css';
+
+export function invokeVirtualIosKeyboard() {
+  // To ensure that a virtual keyboard is shown on iOS when
+  // auto-focusing an input, we create a dummy input that
+  // we briefly attach to the DOM to capture focus, then let
+  // our regular FocusNavigationTarget handling take over.
+  const dummyInput = document.createElement('input');
+  dummyInput.className = classes.dummyInput ?? '';
+  dummyInput.onblur = () => {
+    // Cleanup: Remove the dummy input after focus was moved away from it
+    dummyInput.remove();
+  };
+  document.body.appendChild(dummyInput);
+  dummyInput.focus();
+}