Fixed search input focus on iOS (#16950)

closes https://github.com/TryGhost/Ghost/issues/16825

- iOS is very restrictive on input focus which doesn't allow without any
user interaction
- The only workaround was creating a temporary input, focus it, and
remove it after moving the focus to the actual searfch input
- It also moves the inputRef to the parent component, so that it can be
used in the click event handler, because the focus event only works when
it's inside a function that's triggered after user interaction

ghost/sodo-search/src/App.js

@@ -19,6 +19,8 @@ export default class App extends React.Component {
             indexStarted: false,
             indexComplete: false
         };
+
+        this.inputRef = React.createRef();
     }
 
     componentDidMount() {
@@ -88,6 +90,18 @@ export default class App extends React.Component {
             this.setState({
                 showPopup: true
             });
+
+            const tmpElement = document.createElement('input');
+            tmpElement.style.opacity = '0';
+            tmpElement.style.position = 'fixed';
+            tmpElement.style.top = '0';
+            document.body.appendChild(tmpElement);
+            tmpElement.focus();
+
+            setTimeout(() => {
+                this.inputRef.current.focus();
+                document.body.removeChild(tmpElement);
+            }, 150);
         };
 
         this.customTriggerButtons = this.getCustomTriggerButtons();
@@ -140,6 +154,7 @@ export default class App extends React.Component {
                 searchIndex: this.state.searchIndex,
                 indexComplete: this.state.indexComplete,
                 searchValue: this.state.searchValue,
+                inputRef: this.inputRef,
                 onAction: () => {},
                 dispatch: (action, data) => {
                     if (action === 'update') {

ghost/sodo-search/src/components/PopupModal.js

@@ -73,8 +73,7 @@ class PopupContent extends React.Component {
 }
 
 function SearchBox() {
-    const {searchValue, dispatch} = useContext(AppContext);
-    const inputRef = useRef(null);
+    const {searchValue, dispatch, inputRef} = useContext(AppContext);
     const containerRef = useRef(null);
     useEffect(() => {
         setTimeout(() => {
@@ -94,7 +93,7 @@ function SearchBox() {
         return () => {
             containeRefNode?.ownerDocument.removeEventListener('keyup', keyUphandler);
         };
-    }, [dispatch]);
+    }, [dispatch, inputRef]);
 
     let className = 'z-10 relative flex items-center py-5 px-4 sm:px-7 bg-white rounded-t-lg shadow';
     if (!searchValue) {