Skip to content

Commit 1eb872c

Browse files
committed
fix: show drop down only when search text present or already selected option
1 parent 0cfc173 commit 1eb872c

File tree

6 files changed

+37
-16
lines changed

6 files changed

+37
-16
lines changed

src/components/Modal/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export interface Props extends Omit<ContainerProps, 'withInternalPadding' | 'wit
2727
closeOnEscape?: boolean;
2828
onClose?: () => void;
2929
overlayClassName?: string;
30+
modalContainerClassName?: string;
3031
size?: SizeType;
3132
withoutCloseButton?: boolean;
3233
}
@@ -43,6 +44,7 @@ function Modal(props: Props) {
4344
className,
4445
actions,
4546
childrenContainerClassName,
47+
modalContainerClassName,
4648

4749
...containerProps
4850
} = props;
@@ -78,7 +80,7 @@ function Modal(props: Props) {
7880
return (
7981
<BodyOverlay className={_cs(styles.overlay, overlayClassName)}>
8082
<FocusOn
81-
className={_cs(styles.modalContainer, sizeStyle)}
83+
className={_cs(styles.modalContainer, modalContainerClassName, sizeStyle)}
8284
onClickOutside={handleClickOutside}
8385
onEscapeKey={handleEscape}
8486
gapMode="padding"

src/components/SearchMultiSelectInput/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,10 @@ function SearchMultiSelectInput<
299299
onClearButtonClick={handleClear}
300300
searchText={searchInputValue}
301301
onSearchTextChange={handleSearchValueChange}
302-
dropdownShown={showDropdown}
302+
dropdownShown={showDropdown && (
303+
(isTruthyString(searchInputValue) && searchInputValue.length > 0)
304+
|| realOptions.length > 0
305+
)}
303306
onDropdownShownChange={handleChangeDropdown}
304307
focused={focused}
305308
onFocusedChange={setFocused}

src/components/SearchSelectInput/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,10 @@ function SearchSelectInput<
310310
onClearButtonClick={handleClear}
311311
searchText={searchInputValue}
312312
onSearchTextChange={handleSearchValueChange}
313-
dropdownShown={showDropdown}
313+
dropdownShown={showDropdown && (
314+
(isTruthyString(searchInputValue) && searchInputValue.length > 0)
315+
|| realOptions.length > 0
316+
)}
314317
onDropdownShownChange={handleChangeDropdown}
315318
focused={focused}
316319
onFocusedChange={setFocused}

src/components/domain/DrefShareModal/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,8 @@ function DrefShareModal(props: Props) {
8989

9090
return (
9191
<Modal
92+
overlayClassName={styles.overlay}
93+
modalContainerClassName={styles.modalContainer}
9294
className={styles.drefShareModal}
9395
heading={strings.drefShareTitle}
9496
headerDescription={strings.drefShareDescription}
Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,29 @@
1-
.dref-share-modal {
1+
.overlay {
22
display: flex;
3-
flex-direction: column;
43

5-
.content {
4+
.modal-container {
65
display: flex;
7-
flex-direction: column;
8-
gap: var(--go-ui-spacing-lg);
96

10-
.user-list {
7+
.dref-share-modal {
118
display: flex;
12-
flex-wrap: wrap;
13-
gap: var(--go-ui-spacing-xs);
14-
}
9+
flex-direction: column;
10+
min-height: 25rem;
11+
12+
.content {
13+
display: flex;
14+
flex-direction: column;
15+
gap: var(--go-ui-spacing-lg);
16+
17+
.user-list {
18+
display: flex;
19+
flex-wrap: wrap;
20+
gap: var(--go-ui-spacing-xs);
21+
}
1522

16-
.message {
17-
flex-grow: 1;
23+
.message {
24+
flex-grow: 1;
25+
}
26+
}
1827
}
1928
}
2029
}

src/components/domain/UserSearchMultiSelectInput.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ function UserSearchMultiSelectInput<const NAME>(
2929
) {
3030
const {
3131
className,
32+
options,
3233
...otherProps
3334
} = props;
3435

@@ -40,7 +41,7 @@ function UserSearchMultiSelectInput<const NAME>(
4041
pending,
4142
response,
4243
} = useRequest({
43-
skip: !dropdownShown,
44+
skip: (debouncedSearchText?.length ?? 0) < 1 || !dropdownShown,
4445
url: '/api/v2/users/',
4546
query: {
4647
name: debouncedSearchText,
@@ -57,7 +58,8 @@ function UserSearchMultiSelectInput<const NAME>(
5758
keySelector={keySelector}
5859
labelSelector={getUserName}
5960
onSearchValueChange={setSearchText}
60-
searchOptions={response?.results}
61+
options={options}
62+
searchOptions={response?.results ?? options}
6163
optionsPending={pending}
6264
totalOptionsCount={response?.count ?? 0}
6365
onShowDropdownChange={setShowDropdown}

0 commit comments

Comments
 (0)