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 = ( {props.source && ( - {props.source} + + {props.source} + )} 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 = (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 = (props) => { + const searchInput = useRef(null); const classes = useStyles(props); const otherClasses = useOtherStyles(); const [inputValue, setInputValue] = useState(); @@ -62,6 +69,12 @@ const SearchBar: React.FC = (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(data, { label: label ?? "" }); if (!item) { history.push(`/search?label=${label}`); @@ -111,6 +124,7 @@ const SearchBar: React.FC = (props) => { return ( { if (newValue !== null) { @@ -121,12 +135,21 @@ const SearchBar: React.FC = (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) => (