fix: show drop down only when search text present or already selected option

Author: samshara

src/components/Modal/index.tsx

@@ -27,6 +27,7 @@ export interface Props extends Omit<ContainerProps, 'withInternalPadding' | 'wit
     closeOnEscape?: boolean;
     onClose?: () => void;
     overlayClassName?: string;
+    modalContainerClassName?: string;
     size?: SizeType;
     withoutCloseButton?: boolean;
 }
@@ -43,6 +44,7 @@ function Modal(props: Props) {
         className,
         actions,
         childrenContainerClassName,
+        modalContainerClassName,
 
         ...containerProps
     } = props;
@@ -78,7 +80,7 @@ function Modal(props: Props) {
     return (
         <BodyOverlay className={_cs(styles.overlay, overlayClassName)}>
             <FocusOn
-                className={_cs(styles.modalContainer, sizeStyle)}
+                className={_cs(styles.modalContainer, modalContainerClassName, sizeStyle)}
                 onClickOutside={handleClickOutside}
                 onEscapeKey={handleEscape}
                 gapMode="padding"

src/components/SearchMultiSelectInput/index.tsx

@@ -299,7 +299,10 @@ function SearchMultiSelectInput<
             onClearButtonClick={handleClear}
             searchText={searchInputValue}
             onSearchTextChange={handleSearchValueChange}
-            dropdownShown={showDropdown}
+            dropdownShown={showDropdown && (
+                (isTruthyString(searchInputValue) && searchInputValue.length > 0)
+                || realOptions.length > 0
+            )}
             onDropdownShownChange={handleChangeDropdown}
             focused={focused}
             onFocusedChange={setFocused}

src/components/SearchSelectInput/index.tsx

@@ -310,7 +310,10 @@ function SearchSelectInput<
             onClearButtonClick={handleClear}
             searchText={searchInputValue}
             onSearchTextChange={handleSearchValueChange}
-            dropdownShown={showDropdown}
+            dropdownShown={showDropdown && (
+                (isTruthyString(searchInputValue) && searchInputValue.length > 0)
+                || realOptions.length > 0
+            )}
             onDropdownShownChange={handleChangeDropdown}
             focused={focused}
             onFocusedChange={setFocused}

src/components/domain/DrefShareModal/index.tsx

@@ -89,6 +89,8 @@ function DrefShareModal(props: Props) {
 
     return (
         <Modal
+            overlayClassName={styles.overlay}
+            modalContainerClassName={styles.modalContainer}
             className={styles.drefShareModal}
             heading={strings.drefShareTitle}
             headerDescription={strings.drefShareDescription}

src/components/domain/DrefShareModal/styles.module.css

@@ -1,20 +1,29 @@
-.dref-share-modal {
+.overlay {
     display: flex;
-    flex-direction: column;
 
-    .content {
+    .modal-container {
         display: flex;
-        flex-direction: column;
-        gap: var(--go-ui-spacing-lg);
 
-        .user-list {
+        .dref-share-modal {
             display: flex;
-            flex-wrap: wrap;
-            gap: var(--go-ui-spacing-xs);
-        }
+            flex-direction: column;
+            min-height: 25rem;
+
+            .content {
+                display: flex;
+                flex-direction: column;
+                gap: var(--go-ui-spacing-lg);
+
+                .user-list {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: var(--go-ui-spacing-xs);
+                }
 
-        .message {
-            flex-grow: 1;
+                .message {
+                    flex-grow: 1;
+                }
+            }
         }
     }
 }

src/components/domain/UserSearchMultiSelectInput.tsx

@@ -29,6 +29,7 @@ function UserSearchMultiSelectInput<const NAME>(
 ) {
     const {
         className,
+        options,
         ...otherProps
     } = props;
 
@@ -40,7 +41,7 @@ function UserSearchMultiSelectInput<const NAME>(
         pending,
         response,
     } = useRequest({
-        skip: !dropdownShown,
+        skip: (debouncedSearchText?.length ?? 0) < 1 || !dropdownShown,
         url: '/api/v2/users/',
         query: {
             name: debouncedSearchText,
@@ -57,7 +58,8 @@ function UserSearchMultiSelectInput<const NAME>(
             keySelector={keySelector}
             labelSelector={getUserName}
             onSearchValueChange={setSearchText}
-            searchOptions={response?.results}
+            options={options}
+            searchOptions={response?.results ?? options}
             optionsPending={pending}
             totalOptionsCount={response?.count ?? 0}
             onShowDropdownChange={setShowDropdown}