From 1f9f81792341c03264bb9d3ecfb98680ddcdd33b Mon Sep 17 00:00:00 2001
From: FilipKopecky <kopeckyfil@gmail.com>
Date: Tue, 2 Nov 2021 15:10:14 +0100
Subject: [PATCH] [#11] Autocomplete behaves in more intuitive way

When mouse leaves the search suggestions, the previously highlighted option is no longer highlighted and the text inside the input is considered to be active ("highlighted")
---
 src/components/DefinitionWrapper.tsx |  7 ++++++-
 src/components/IriLabel.tsx          |  2 +-
 src/components/SearchBar.tsx         | 25 ++++++++++++++++++++++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/DefinitionWrapper.tsx b/src/components/DefinitionWrapper.tsx
index 7bf7b8a..ad20942 100644
--- a/src/components/DefinitionWrapper.tsx
+++ b/src/components/DefinitionWrapper.tsx
@@ -46,7 +46,12 @@ const DefinitionWrapper: React.FC<DefinitionWrapperProps & BoxProps> = (
               </Box>
               {props.source && (
                 <Box fontStyle="italic" color="text.disabled">
-                  <Typography variant="body1">{props.source}</Typography>
+                  <Typography
+                    variant="body1"
+                    style={{ wordWrap: "break-word" }}
+                  >
+                    {props.source}
+                  </Typography>
                 </Box>
               )}
             </Box>
diff --git a/src/components/IriLabel.tsx b/src/components/IriLabel.tsx
index bafcf3e..4c3c53a 100644
--- a/src/components/IriLabel.tsx
+++ b/src/components/IriLabel.tsx
@@ -19,4 +19,4 @@ const IriLabel: React.FC<IriItem & TypographyProps> = (props) => {
   return null;
 };
 
-export default React.memo(IriLabel);
+export default IriLabel;
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index d973fcd..e59365e 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -1,4 +1,10 @@
-import React, { ChangeEvent, useEffect, useMemo, useState } from "react";
+import React, {
+  ChangeEvent,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import TextField from "@material-ui/core/TextField";
 import Autocomplete, {
   createFilterOptions,
@@ -55,6 +61,7 @@ interface SearchBarProps {
 }
 
 const SearchBar: React.FC<SearchBarProps> = (props) => {
+  const searchInput = useRef(null);
   const classes = useStyles(props);
   const otherClasses = useOtherStyles();
   const [inputValue, setInputValue] = useState<string | undefined>();
@@ -62,6 +69,12 @@ const SearchBar: React.FC<SearchBarProps> = (props) => {
   const history = useHistory();
 
   const onChangeHandler = (label: string | null) => {
+    // This part checks whether a mouse is hovering over a text
+    // @ts-ignore
+    label = searchInput.current?.getAttribute("aria-activedescendant")
+      ? label
+      : inputValue;
+
     const item = find<SearchItem>(data, { label: label ?? "" });
     if (!item) {
       history.push(`/search?label=${label}`);
@@ -111,6 +124,7 @@ const SearchBar: React.FC<SearchBarProps> = (props) => {
 
   return (
     <Autocomplete
+      open={true}
       classes={classes}
       onChange={(event: any, newValue: any) => {
         if (newValue !== null) {
@@ -121,12 +135,21 @@ const SearchBar: React.FC<SearchBarProps> = (props) => {
       noOptionsText="Nebyly nalezeny žádné výsledky"
       fullWidth
       freeSolo
+      ListboxProps={{
+        onMouseOut: (item: any) => {
+          // @ts-ignore
+          searchInput.current?.removeAttribute("aria-activedescendant");
+          if (item.target.attributes.getNamedItem("data-focus"))
+            item.target.attributes.removeNamedItem("data-focus");
+        },
+      }}
       options={data.map((item) => item.label)}
       onInputChange={debouncedChangeHandler}
       renderInput={(params) => (
         <TextField
           {...params}
           placeholder="Zadejte hledané slovo"
+          inputRef={searchInput}
           InputProps={{
             ...params.InputProps,
             endAdornment: endAdornment,