auto focus on search bar when moving over to dict
This commit is contained in:
parent
74b7d96262
commit
3e6ba3f4b1
|
@ -445,6 +445,7 @@ class App extends Component<RouteComponentProps, State> {
|
|||
state={this.state}
|
||||
optionsDispatch={this.handleOptionsUpdate}
|
||||
handleSearchValueChange={this.handleSearchValueChange}
|
||||
pathname={this.props.location.pathname}
|
||||
/>}
|
||||
<div className="container-fluid" data-testid="body">
|
||||
{this.state.dictionaryStatus !== "ready" ?
|
||||
|
@ -578,6 +579,7 @@ class App extends Component<RouteComponentProps, State> {
|
|||
optionsDispatch={this.handleOptionsUpdate}
|
||||
handleSearchValueChange={this.handleSearchValueChange}
|
||||
onBottom
|
||||
pathname={this.props.location.pathname}
|
||||
/>}
|
||||
</footer>
|
||||
</div>;
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
*
|
||||
*/
|
||||
|
||||
import { useRef } from "react";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { State } from "../types/dictionary-types";
|
||||
import {
|
||||
OptionsAction,
|
||||
|
@ -14,13 +14,26 @@ import {
|
|||
SearchType,
|
||||
} from "../types/dictionary-types";
|
||||
|
||||
const SearchBar = ({ state, optionsDispatch, handleSearchValueChange, onBottom }: {
|
||||
const SearchBar = ({ state, optionsDispatch, handleSearchValueChange, onBottom, pathname }: {
|
||||
state: State
|
||||
optionsDispatch: (action: OptionsAction) => void,
|
||||
handleSearchValueChange: (searchValue: string) => void,
|
||||
onBottom?: boolean,
|
||||
pathname: string,
|
||||
}) => {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
useEffect(() => {
|
||||
window.addEventListener("focus", onFocus);
|
||||
return () => {
|
||||
window.removeEventListener("focus", onFocus);
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
}, []);
|
||||
function onFocus() {
|
||||
if (["/", "/search"].includes(pathname)) {
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
}
|
||||
const LanguageToggle = ({ language }: { language: Language }) => {
|
||||
const arrowDirection = language === "Pashto" ? "right" : "left";
|
||||
return (
|
||||
|
|
Loading…
Reference in New Issue