nikon/docsearch
1
0
Fork 0
Code Activity Actions

refactor(docsearch): manage input focus with effects

Browse source 
The `autoFocus` prop is not standardize when coming from a component that gets mounted after the first page load.

Although this works with React, it does with Preact. This makes it work with both libraries.
This commit is contained in:
François Chalifour 2020-07-07 15:04:11 +02:00
parent 929b1c6a72
commit 2a00d3f3c0
2 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/DocSearchModal.tsx
View file

@ -106,7 +106,6 @@ export function DocSearchModal({
>({
id: 'docsearch',
defaultHighlightedIndex: 0,
autoFocus: true,
placeholder,
openOnFocus: true,
initialState: {

7
src/SearchBox.tsx
View file

@ -28,6 +28,12 @@ export function SearchBox(props: SearchBoxProps) {
inputElement: props.inputRef.current,
});
React.useEffect(() => {
if (props.autoFocus && props.inputRef.current) {
props.inputRef.current.focus();
}
}, [props.autoFocus, props.inputRef]);
return (
<>
<form
@ -50,7 +56,6 @@ export function SearchBox(props: SearchBoxProps) {
className="DocSearch-Input"
ref={props.inputRef}
{...props.getInputProps({
autoFocus: props.autoFocus,
inputElement: props.inputRef.current!,
type: 'search',
maxLength: MAX_QUERY_SIZE,