From 778adb2d26f7d4f54a9d44a9c6d83a6e1f8e59ba Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Sun, 17 May 2020 17:53:21 +0300
Subject: [PATCH] refactor(v2): improve UX of search page (#2761)

---
 .../src/pages/search/index.js                        | 12 +++++++++++-
 .../src/theme/SearchBar/index.js                     |  4 +++-
 2 files changed, 14 insertions(+), 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
index bb96bcd407..4ff0becb1a 100644
--- 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
index ddac0c6e16..8e9ff2d1d6 100644
--- 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);
     }
   });