refactor(v2): improve UX of search page

facebook · May 17, 2020 · d9cabb9 · d9cabb9
1 parent d145f03
commit d9cabb9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/docusaurus-theme-search-algolia/src/pages/search/index.js b/packages/docusaurus-theme-search-algolia/src/pages/search/index.js
@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* eslint-disable jsx-a11y/no-autofocus */
+
 import React, {useEffect, useState, useReducer, useRef} from 'react';
 
 import algoliaSearch from 'algoliasearch/lite';
@@ -20,6 +22,10 @@ import Layout from '@theme/Layout';
 
 import styles from './styles.module.css';
 
+function pluralize(count, word) {
+  return count > 1 ? `${word}s` : word;
+}
+
 function Search() {
   const {
     siteConfig: {
@@ -237,6 +243,7 @@ function Search() {
               onChange={handleSearchInputChange}
               value={searchQuery}
               autoComplete="off"
+              autoFocus
             />
           </div>
 
@@ -266,7 +273,10 @@ function Search() {
           <div
             className={classnames('col', 'col--8', styles.searchResultsColumn)}>
             {!!searchResultState.totalResults && (
-              <strong>{searchResultState.totalResults} documents found</strong>
+              <strong>
+                {searchResultState.totalResults}{' '}
+                {pluralize(searchResultState.totalResults, 'document')} found
+              </strong>
             )}
           </div>
 

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
@@ -37,6 +37,8 @@ const Search = (props) => {
       // Override algolia's default selection event, allowing us to do client-side
       // navigation and avoiding a full page refresh.
       handleSelected: (_input, _event, suggestion) => {
+        _event.stopPropagation();
+
         // Use an anchor tag to parse the absolute url into a relative url
         // Alternatively, we can use new URL(suggestion.url) but it's not supported in IE.
         const a = document.createElement('a');
@@ -93,7 +95,7 @@ const Search = (props) => {
   });
 
   const handleSearchInputPressEnter = useCallback((e) => {
-    if (e.key === 'Enter') {
+    if (!e.defaultPrevented && e.key === 'Enter') {
       navigateToSearchPage(e.target.value);
     }
   });