Add option to hide dropdown for special cases

Author: tnagorra

src/components/SearchSelectInput/index.tsx

@@ -45,6 +45,7 @@ export type Props<
         ) => OPTION[];
         onSearchValueChange?: (value: string | undefined) => void;
         onShowDropdownChange?: (value: boolean) => void;
+        onEnterWithoutOption?: (value: string | undefined) => void;
 
         selectedOnTop: boolean;
     }, OMISSION>
@@ -74,6 +75,7 @@ export type Props<
         | 'hasValue'
         | 'hideOptionFilter'
         | 'onSelectAllButtonClick'
+        | 'onEnterWithoutOption'
         | OMISSION
     >
     & ({
@@ -211,10 +213,14 @@ function SearchSelectInput<
         if (onShowDropdownChange) {
             onShowDropdownChange(false);
         }
+        setSearchInputValue(undefined);
+        if (onSearchValueChange) {
+            onSearchValueChange(undefined);
+        }
         if (onEnterWithoutOption) {
-            onEnterWithoutOption();
+            onEnterWithoutOption(searchInputValue);
         }
-    }, [onShowDropdownChange, onEnterWithoutOption]);
+    }, [searchInputValue, onShowDropdownChange, onEnterWithoutOption, onSearchValueChange]);
 
     const handleChangeDropdown = useCallback(
         (myVal: boolean) => {

src/components/SelectInputContainer/index.tsx

@@ -63,6 +63,7 @@ export type SelectInputContainerProps<
         onClearButtonClick: () => void;
         onSelectAllButtonClick?: () => void;
         onEnterWithoutOption?: () => void;
+        dropdownHidden?: boolean;
     }, OMISSION>
         & Omit<InputContainerProps, 'input'>
     );
@@ -126,6 +127,7 @@ function SelectInputContainer<
         required,
         variant,
         errorOnTooltip,
+        dropdownHidden,
     } = props;
 
     const options = optionsFromProps ?? (emptyList as OPTION[]);
@@ -183,11 +185,9 @@ function SelectInputContainer<
             if (readOnly) {
                 return;
             }
-            if (options.length > 0) {
-                handleShowDropdown();
-            }
+            handleShowDropdown();
         },
-        [readOnly, handleShowDropdown, options],
+        [readOnly, handleShowDropdown],
     );
 
     const handlePopupBlur = useCallback(
@@ -259,6 +259,8 @@ function SelectInputContainer<
         ? `${strings.infoMessageAnd} ${totalOptionsCount - optionsCount} ${strings.infoMessageMore}`
         : undefined;
 
+    const dropdownShownActual = dropdownShown && !dropdownHidden;
+
     return (
         <>
             <InputContainer
@@ -311,11 +313,11 @@ function SelectInputContainer<
                                 onClick={handleToggleDropdown}
                                 variant="tertiary"
                                 name={undefined}
-                                title={dropdownShown
+                                title={dropdownShownActual
                                     ? strings.buttonTitleClose
                                     : strings.buttonTitleOpen}
                             >
-                                {dropdownShown
+                                {dropdownShownActual
                                     ? <ArrowUpSmallFillIcon className={styles.icon} />
                                     : <ArrowDownSmallFillIcon className={styles.icon} />}
                             </Button>
@@ -340,7 +342,7 @@ function SelectInputContainer<
                     />
                 )}
             />
-            {dropdownShown && (
+            {dropdownShownActual && (
                 <Popup
                     elementRef={popupRef}
                     parentRef={inputSectionRef}

src/components/domain/KeywordSearchSelectInput/index.tsx

@@ -278,23 +278,23 @@ function KeywordSearchSelectInput() {
         );
     }, [navigate]);
 
-    const handleSearchInputEnter = useCallback(() => {
+    const handleSearchInputEnter = useCallback((text: string | undefined) => {
         // NOTE: We are not deliberately not using debouncedSearchText here
-        const searchStringSafe = searchText?.trim() ?? '';
+        const searchStringSafe = text?.trim() ?? '';
         if (searchStringSafe.length > 0) {
             navigate(
                 'search',
-                { search: `${KEY_URL_SEARCH}=${searchText}` },
+                { search: `${KEY_URL_SEARCH}=${text}` },
             );
         }
     }, [
-        searchText,
         navigate,
     ]);
 
     return (
         <SearchSelectInput
             // eslint-disable-next-line react/jsx-props-no-spreading
+            dropdownHidden={isNotDefined(searchText) || searchText.trim().length <= 0}
             name="keyword"
             options={undefined}
             value={undefined}

src/views/DrefFinalReportForm/Overview/index.tsx

@@ -404,7 +404,7 @@ function Overview(props: Props) {
                             <>
                                 {strings.finalReportPeopleTargeted}
                                 <Link
-                                    title={strings.odrefFormClickEmergencyResponseFramework}
+                                    title={strings.drefFormClickEmergencyResponseFramework}
                                     href={peopleTargetedLink}
                                     external
                                 >