Removed css load flicker on opening search

refs https://github.com/TryGhost/Team/issues/1665

- removes the flicker caused by lag in css load with inline css override
- adds search close on clicking outside the popup

ghost/sodo-search/src/App.js

@@ -14,7 +14,8 @@ export default class App extends React.Component {
         });
 
         this.state = {
-            searchIndex
+            searchIndex,
+            showPopup: true
         };
     }
 
@@ -29,7 +30,7 @@ export default class App extends React.Component {
         return (
             <AppContext.Provider value={{
                 page: 'search',
-                showPopup: true,
+                showPopup: this.state.showPopup,
                 siteUrl: this.props.siteUrl,
                 appVersion: this.props.appVersion,
                 searchIndex: this.state.searchIndex,

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

@@ -112,7 +112,9 @@ class PopupContent extends React.Component {
     handlePopupClose(e) {
         e.preventDefault();
         if (e.target === e.currentTarget) {
-            this.context.onAction('closePopup');
+            this.context.dispatch('update', {
+                showPopup: false
+            });
         }
     }
 
@@ -129,7 +131,6 @@ function SearchBox() {
         <div className='flex items-center py-5 px-7 mt-10 md:mt-0'>
             <SearchIcon className='mr-3 text-neutral-900' alt='Search' />
             <input
-                autoFocus
                 value={searchValue || ''}
                 onChange={(e) => {
                     dispatch('update', {
@@ -337,9 +338,20 @@ function NoResultsBox() {
 }
 
 function Search() {
+    const {dispatch} = useContext(AppContext);
     return (
         <>
-            <div className='bg-[rgba(0,0,0,0.2)] h-screen w-screen pt-20 antialiased z-50 relative'>
+            <div
+                className='bg-[rgba(0,0,0,0.2)] h-screen w-screen pt-20 antialiased z-50 relative'
+                onClick={(e) => {
+                    e.preventDefault();
+                    if (e.target === e.currentTarget) {
+                        dispatch('update', {
+                            showPopup: false
+                        });
+                    }
+                }}
+            >
                 <div className='bg-white max-w-lg rounded-t-2xl md:rounded-lg shadow-xl m-auto absolute md:relative top-20 md:top-0 bottom-0 left-0 right-0'>
                     <CloseIcon className='ml-3 text-neutral-300 cursor-pointer w-5 h-5  right-6 top-6 md:hidden' alt='Close' />
                     <SearchBox />
@@ -367,7 +379,9 @@ export default class PopupModal extends React.Component {
     handlePopupClose(e) {
         e.preventDefault();
         if (e.target === e.currentTarget) {
-            // this.context.onAction('closePopup');
+            this.context.dispatch('update', {
+                showPopup: false
+            });
         }
     }
 
@@ -376,6 +390,10 @@ export default class PopupModal extends React.Component {
             :root {
                 --brandcolor: ${this.context.brandColor || ''}
             }
+
+            .ghost-display {
+                display: none;
+            }
         `;
 
         const cssLink = getBundledCssLink({appVersion: this.context.appVersion});
@@ -398,15 +416,20 @@ export default class PopupModal extends React.Component {
         return (
             <div style={Styles.modalContainer} className='gh-root-frame'>
                 <Frame style={frameStyle} title='portal-popup' head={this.renderFrameStyles()}>
-                    <div onClick = {e => this.handlePopupClose(e)}></div>
+                    <div
+                        onClick = {e => this.handlePopupClose(e)}
+                        className='absolute top-0 bottom-0 left-0 right-0 block backdrop-blur-[2px] z-0 bg-gradient-to-br from-[rgba(0,0,0,0.2)] to-[rgba(0,0,0,0.1)]' />
                     <PopupContent />
-                    <div className='absolute top-0 bottom-0 left-0 right-0 block backdrop-blur-[2px] z-0 bg-gradient-to-br from-[rgba(0,0,0,0.2)] to-[rgba(0,0,0,0.1)]'></div>
                 </Frame>
             </div>
         );
     }
 
     render() {
-        return this.renderFrameContainer();
+        const {showPopup} = this.context;
+        if (showPopup) {
+            return this.renderFrameContainer();
+        }
+        return null;
     }
 }

ghost/sodo-search/src/index.css

@@ -9,4 +9,8 @@ html {
 
 body {
     font-size: 1.5rem;
-}
+}
+
+.ghost-display {
+    display: block !important;
+}