Skip to content

Commit

Permalink
change(header): use a real button for search submit
Browse files Browse the repository at this point in the history
- and avoid need for text state, we don't need to re-render the component
  each time the user types, we are only interested in the final value of
  the input in order to know with what value we need to give to q
  • Loading branch information
ichim-david committed Jul 24, 2023
1 parent 8df5c8a commit 37e491b
Showing 1 changed file with 5 additions and 12 deletions.
17 changes: 5 additions & 12 deletions src/ui/Header/HeaderSearchPopUp.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ function HeaderSearchPopUp({
} = activeView || {};
const { suggestionsTitle, suggestions, maxToShow } = searchSuggestions || {};

const [text, setText] = React.useState('');
const [visibleSuggestions, setVisibileSuggestions] = React.useState(
getRandomItems(suggestions, maxToShow),
);
Expand All @@ -49,12 +48,8 @@ function HeaderSearchPopUp({

useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });

const onChangeText = (event, { value }) => {
setText(value);
event.preventDefault();
};

const onSubmit = (event) => {
const text = searchInputRef?.current?.inputRef?.current?.value;
history.push(`${path}?q=${text}`);

if (window?.searchContext?.resetSearch) {
Expand All @@ -80,13 +75,11 @@ function HeaderSearchPopUp({
<form method="get" onSubmit={onSubmit}>
<Input
ref={searchInputRef}
className="search"
onChange={onChangeText}
icon={{
className: 'ri-search-line',
link: true,
className="icon search"
action={{
className: 'icon ri-search-line',
'aria-label': 'Submit search',
onClick: onSubmit,
tabIndex: '0',
onKeyDown: (event) => {
handleEnterKeyPress(event, onSubmit);
},
Expand Down

0 comments on commit 37e491b

Please sign in to comment.