Adds some polish to the search

microsoft · Jun 22, 2020 · 4f8486e · 4f8486e
1 parent c321ac0
commit 4f8486e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 71 deletions.
diff --git a/packages/typescriptlang-org/scripts/downloadSearchAssets.js b/packages/typescriptlang-org/scripts/downloadSearchAssets.js
diff --git a/packages/typescriptlang-org/src/components/layout/TopNav.tsx b/packages/typescriptlang-org/src/components/layout/TopNav.tsx
@@ -15,7 +15,7 @@ export type Props = {
 
 import { navCopy } from "../../copy/en/nav"
 import { createInternational } from "../../lib/createInternational"
-import { DocSearchButton, useDocSearchKeyboardEvents } from '@docsearch/react';
+import { useDocSearchKeyboardEvents } from '@docsearch/react';
 import Helmet from "react-helmet";
 
 let DocSearchModal: any = null;
@@ -28,31 +28,6 @@ export const SiteNav = (props: Props) => {
   // This extra bit of mis-direction ensures that non-essential code runs after 
   // the page is loaded
   useEffect(() => {
-    // const searchScript = document.createElement('script');
-    // const searchCSS = document.createElement('link');
-
-    // searchScript.src = withPrefix("/js/docsearch.js");
-    // searchScript.async = true;
-    // searchScript.onload = () => {
-    //   // @ts-ignore - this comes from the script above
-    //   if (typeof docsearch !== 'undefined') {
-    //     // @ts-ignore - this comes from the script above
-    //     docsearch({
-    //       apiKey: '3c2db2aef0c7ff26e8911267474a9b2c',
-    //       indexName: 'typescriptlang',
-    //       inputSelector: '.search input',
-    //       debug: true // Set debug to true if you want to inspect the dropdown
-    //     });
-
-    //     searchCSS.rel = 'stylesheet';
-    //     searchCSS.href = withPrefix('/css/docsearch.css');
-    //     searchCSS.type = 'text/css';
-    //     document.body.appendChild(searchCSS);
-    //   }
-    // }
-
-    // document.body.appendChild(searchScript);
-
     setupStickyNavigation()
   }, []);
 
@@ -88,10 +63,6 @@ export const SiteNav = (props: Props) => {
               <li className="nav-item">
                 <DocSearch i={i} indexName="typescriptlang" apiKey="3c2db2aef0c7ff26e8911267474a9b2c" />
               </li>
-              {/* 
-                <li className="nav-item hide-small"><a href="#" title="Popover for app settings"><svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" fill="#fff" r="6" /></svg></a></li>
-                <li className="nav-item hide-small"><a href="/play">en</a></li>
-              */}
             </ul>
           </div>
         </div>
@@ -120,7 +91,18 @@ function ResultsFooter({ state, onClose }) {
   );
 }
 
-function DocSearch({ i, indexName, appId, apiKey, searchParameters }) {
+
+interface DocSearchProps {
+  i: (string) => string
+  indexName: string
+  apiKey: string
+  appId?: string
+  searchParameters?: any
+}
+
+const DocSearch = (props: DocSearchProps) => {
+  const { i, indexName, appId, apiKey, searchParameters } = props
+
   const [isOpen, setIsOpen] = useState(false);
 
   const importDocSearchModalIfNeeded = useCallback(() => {
@@ -167,17 +149,15 @@ function DocSearch({ i, indexName, appId, apiKey, searchParameters }) {
         onFocus={importDocSearchModalIfNeeded}
         onMouseOver={importDocSearchModalIfNeeded}
         onClick={onOpen}
+        onSubmit={(e) => { e.preventDefault(); onOpen(); return false; }}
       >
         <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m10.5 0c.5052 0 .9922.0651042 1.4609.195312.4688.130209.9063.315105 1.3125.554688.4063.239583.7761.52865 1.1094.86719.3386.33333.6276.70312.8672 1.10937s.4245.84375.5547 1.3125.1953.95573.1953 1.46094-.0651.99219-.1953 1.46094-.3151.90625-.5547 1.3125-.5286.77864-.8672 1.11718c-.3333.33334-.7031.61978-1.1094.85938-.4062.2396-.8437.4245-1.3125.5547-.4687.1302-.9557.1953-1.4609.1953-.65104 0-1.27604-.1094-1.875-.3281-.59375-.2188-1.14062-.5339-1.64062-.94534l-6.132818 6.12504c-.098958.0989-.216145.1484-.351562.1484s-.252604-.0495-.351562-.1484c-.0989588-.099-.148438-.2162-.148438-.3516s.0494792-.2526.148438-.3516l6.125002-6.13278c-.41146-.5-.72656-1.04687-.94532-1.64062-.21874-.59896-.32812-1.22396-.32812-1.875 0-.50521.0651-.99219.19531-1.46094s.31511-.90625.55469-1.3125.52604-.77604.85938-1.10937c.33854-.33854.71093-.627607 1.11718-.86719s.84375-.424479 1.3125-.554688c.46875-.1302078.95573-.195312 1.46094-.195312zm0 10c.6198 0 1.2031-.11719 1.75-.35156.5469-.23959 1.0234-.5625 1.4297-.96875.4062-.40625.7265-.88281.9609-1.42969.2396-.54688.3594-1.13021.3594-1.75s-.1198-1.20312-.3594-1.75c-.2344-.54688-.5547-1.02344-.9609-1.42969-.4063-.40625-.8828-.72656-1.4297-.96093-.5469-.23959-1.1302-.35938-1.75-.35938-.61979 0-1.20312.11979-1.75.35938-.54688.23437-1.02344.55468-1.42969.96093s-.72916.88281-.96875 1.42969c-.23437.54688-.35156 1.13021-.35156 1.75s.11719 1.20312.35156 1.75c.23959.54688.5625 1.02344.96875 1.42969s.88281.72916 1.42969.96875c.54688.23437 1.13021.35156 1.75.35156z" fill="#fff" /></svg>
         <span>
-          <input id='search-box-top' type="search" placeholder={i("nav_search_placeholder")} aria-label={i("nav_search_aria")} />
+          <input id='search-box-top' type="search" placeholder={i("nav_search_placeholder")} aria-label={i("nav_search_aria")} autoComplete="off" />
         </span>
         <input type="submit" style={{ display: "none" }} />
       </form>
 
-
-
-
       {
         isOpen &&
         createPortal(
@@ -188,9 +168,9 @@ function DocSearch({ i, indexName, appId, apiKey, searchParameters }) {
             searchParameters={searchParameters}
             onClose={onClose}
             initialScrollY={window.scrollY}
+            query={(document.getElementById("search-box-top") as any).value || ""}
             navigator={{
               navigate({ suggestionUrl }) {
-                // history.push(suggestionUrl);
                 navigate(suggestionUrl)
               },
             }}