Redirect to advanced search if search string is enclosed in doublequotes

src/apps/search-header/search-header.dev.tsx

@@ -61,9 +61,9 @@ export default {
       defaultValue: "/advanced-search",
       control: { type: "text" }
     },
-    searchHeaderAdvancedSearchIconText: {
+    searchHeaderDropdownText: {
       name: "Search header advanced search icon label",
-      defaultValue: "Advanced search",
+      defaultValue: "Dropdown with additional search functions",
       control: { type: "text" }
     },
     materialUrl: {

src/apps/search-header/search-header.entry.tsx

@@ -13,7 +13,7 @@ export interface SearchHeaderTextProps {
   stringSuggestionAuthorText?: string;
   stringSuggestionWorkText?: string;
   stringSuggestionTopicText?: string;
-  searchHeaderAdvancedSearchIconText: string;
+  searchHeaderDropdownText: string;
   etAlText?: string;
   autosuggestBookCategoryText: string;
   autosuggestEbookCategoryText: string;

src/apps/search-header/search-header.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useCombobox, UseComboboxStateChange } from "downshift";
+import { useClickAway } from "react-use";
 import {
   SuggestionsFromQueryStringQuery,
   SuggestionType,
@@ -10,6 +11,7 @@ import { Autosuggest } from "../../components/autosuggest/autosuggest";
 import { Suggestion } from "../../core/utils/types/autosuggest";
 import { useUrls } from "../../core/utils/url";
 import {
+  constructAdvancedSearchUrl,
   constructMaterialUrl,
   constructSearchUrl,
   constructSearchUrlWithFilter,
@@ -324,19 +326,48 @@ const SearchHeader: React.FC = () => {
     onHighlightedIndexChange: handleHighlightedIndexChange
   });
 
+  const headerDropdownRef = React.useRef<HTMLButtonElement>(null);
+
+  useClickAway(headerDropdownRef, () => {
+    // We use a timeout so that when the user clicks on the dropdown arrow as
+    // the dropdown is open, the state first needs to change through the
+    // dropdown arrow button (icon in the search bar component)
+    setTimeout(() => {
+      setIsHeaderDropdownOpen(false);
+    }, 100);
+  });
+
+  const [redirectUrl, setRedirectUrl] = useState<URL>(
+    constructSearchUrl(searchUrl, q)
+  );
+
+  useEffect(() => {
+    if (
+      q.trim().charAt(0) === '"' &&
+      q.trim().charAt(q.length - 1) === '"' &&
+      q.trim() !== '""' &&
+      q.trim() !== '"'
+    ) {
+      setRedirectUrl(constructAdvancedSearchUrl(advancedSearchUrl, q));
+    } else {
+      setRedirectUrl(constructSearchUrl(searchUrl, q));
+    }
+  }, [q, advancedSearchUrl, searchUrl]);
+
   return (
-    <form
-      className="header__menu-second"
-      action={String(constructSearchUrl(searchUrl, qWithoutQuery))}
-    >
+    <div className="header__menu-second">
       {/* The downshift combobox uses prop spreading by design */}
       {/* eslint-disable-next-line react/jsx-props-no-spreading */}
       <div className="header__menu-search">
         <SearchBar
+          q={q}
           getInputProps={getInputProps}
           getLabelProps={getLabelProps}
+          qWithoutQuery={qWithoutQuery}
           setQWithoutQuery={setQWithoutQuery}
+          isHeaderDropdownOpen={isHeaderDropdownOpen}
           setIsHeaderDropdownOpen={setIsHeaderDropdownOpen}
+          redirectUrl={redirectUrl}
         />
         <Autosuggest
           textData={textData}
@@ -356,14 +387,27 @@ const SearchHeader: React.FC = () => {
             data-cy="search-header-dropdown"
           >
             <ul>
-              <li className="header__menu-dropdown-item">
+              <li>
                 <button
-                  className="cursor-pointer"
+                  ref={headerDropdownRef}
                   type="button"
+                  role="menuitem"
+                  className="header__menu-dropdown-item cursor-pointer"
                   onClick={() => redirectTo(advancedSearchUrl)}
-                  onKeyUp={(e) =>
-                    e.key === "Enter" && redirectTo(advancedSearchUrl)
-                  }
+                  onKeyUp={(e) => {
+                    if (e.key === "Enter") {
+                      return redirectTo(advancedSearchUrl);
+                    }
+                    if (
+                      e.key === "ArrowDown" ||
+                      e.key === "ArrowUp" ||
+                      e.key === "Escape"
+                    ) {
+                      return setIsHeaderDropdownOpen(false);
+                    }
+                    return null;
+                  }}
+                  onBlur={() => setIsHeaderDropdownOpen(false)}
                 >
                   {t("headerDropdownItemAdvancedSearchText")}
                 </button>
@@ -372,7 +416,7 @@ const SearchHeader: React.FC = () => {
           </div>
         )}
       </div>
-    </form>
+    </div>
   );
 };
 

src/components/search-bar/search-bar.tsx

@@ -3,32 +3,41 @@ import searchIcon from "@danskernesdigitalebibliotek/dpl-design-system/build/ico
 import expandIcon from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/collection/ExpandMore.svg";
 import { UseComboboxPropGetters } from "downshift";
 import { useText } from "../../core/utils/text";
+import { redirectTo } from "../../core/utils/helpers/url";
 
 export interface SearchBarProps {
+  q: string;
   getInputProps: UseComboboxPropGetters<unknown>["getInputProps"];
   getLabelProps: UseComboboxPropGetters<unknown>["getLabelProps"];
   dataCy?: string;
+  qWithoutQuery: string;
   setQWithoutQuery: (value: string) => void;
+  isHeaderDropdownOpen: boolean;
   setIsHeaderDropdownOpen: (
     value: boolean | ((prevState: boolean) => boolean)
   ) => void;
+  redirectUrl: URL;
 }
 
 const SearchBar: React.FC<SearchBarProps> = ({
+  q,
   getInputProps,
   getLabelProps,
   dataCy = "search-header-input",
+  qWithoutQuery,
   setQWithoutQuery,
-  setIsHeaderDropdownOpen
+  isHeaderDropdownOpen,
+  setIsHeaderDropdownOpen,
+  redirectUrl
 }) => {
   const t = useText();
   const handleDropdownMenu = () => {
-    setIsHeaderDropdownOpen((prev: boolean) => !prev);
+    setIsHeaderDropdownOpen(!isHeaderDropdownOpen);
   };
 
   return (
     <>
-      {/* The downshift combobox uses prop spreading by design & associated control is desctructured too */}
+      {/* The downshift combobox uses prop spreading by design & associated control is destructured too */}
       {/* eslint-disable-next-line jsx-a11y/label-has-associated-control, react/jsx-props-no-spreading */}
       <label className="hide-visually" {...getLabelProps()}>
         {t("searchHeaderInputLabelText")}
@@ -44,6 +53,11 @@ const SearchBar: React.FC<SearchBarProps> = ({
         type="text"
         placeholder={t("inputPlaceholderText")}
         aria-label={t("inputPlaceholderText")}
+        onKeyUp={(e) => {
+          if (e.key === "Enter" && qWithoutQuery === q && q.length > 0) {
+            redirectTo(redirectUrl);
+          }
+        }}
         {...getInputProps({
           onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
             setQWithoutQuery(e.target.value);
@@ -52,27 +66,42 @@ const SearchBar: React.FC<SearchBarProps> = ({
       />
       {/* eslint-enable react/jsx-props-no-spreading */}
       <input
-        required
         type="image"
         src={searchIcon}
         alt={t("searchHeaderIconAltText")}
         className="header__menu-search-icon"
+        onClick={() => {
+          // Only redirect if there is no selected item in autosuggest
+          if (qWithoutQuery === q && q.length > 0) {
+            redirectTo(redirectUrl);
+          }
+        }}
+        onKeyUp={(e) => {
+          // Only redirect if there is no selected item in autosuggest
+          if (e.key === "Enter" && qWithoutQuery === q && q.length > 0) {
+            redirectTo(redirectUrl);
+          }
+        }}
       />
       <input
-        required
         type="image"
         src={expandIcon}
-        alt={t("searchHeaderAdvancedSearchIconText")}
+        alt={t("searchHeaderDropdownText")}
         className="header__menu-dropdown-icon"
         onClick={(e) => {
+          e.preventDefault();
           e.stopPropagation();
           handleDropdownMenu();
         }}
-        onKeyUp={(e) =>
-          (e.key === "Enter" || e.key === "ArrowDown") && handleDropdownMenu()
-        }
+        onKeyUp={(e) => {
+          if (e.key === "Enter" || e.key === "ArrowDown") {
+            e.preventDefault();
+            e.stopPropagation();
+            handleDropdownMenu();
+          }
+        }}
         tabIndex={0}
-        aria-label={t("searchHeaderAdvancedSearchIconText")}
+        aria-label={t("searchHeaderDropdownText")}
         data-cy="search-header-dropdown-icon"
       />
     </>

src/core/utils/helpers/url.ts

@@ -104,7 +104,7 @@ export const constructSearchUrl = (searchUrl: URL, q: string) =>
 
 export const constructAdvancedSearchUrl = (advancedSearchUrl: URL, q: string) =>
   appendQueryParametersToUrl(advancedSearchUrl, {
-    q
+    advancedSearchCql: q
   });
 
 export const constructSearchUrlWithFilter = (args: {