change(header): use a real button for search submit

- 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

src/ui/Header/HeaderSearchPopUp.js

@@ -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),
   );
@@ -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) {
@@ -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);
                 },