[#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")
datagov-cz · Nov 2, 2021 · 1f9f817 · 1f9f817
1 parent 0c5c04c
commit 1f9f817
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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,13 +61,20 @@ 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>();
   const { data = [], isLoading } = useSearch(inputValue);
   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,