From 9fc32dc59bcee75c5d626e409c64a61631cc9d46 Mon Sep 17 00:00:00 2001
From: Gabriel Borlea <gabriel.borlea@8x8.com>
Date: Thu, 27 Apr 2023 18:14:16 +0300
Subject: [PATCH] fix: multiselect for invite people (#13287)

* fix: multiselect duplicates

* set multiselect height to 200px
---
 .../base/react/components/web/MultiSelectAutocomplete.tsx   | 4 ++--
 react/features/base/ui/components/web/MultiSelect.tsx       | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/react/features/base/react/components/web/MultiSelectAutocomplete.tsx b/react/features/base/react/components/web/MultiSelectAutocomplete.tsx
index 2d2637e1ec..8ccc09e0d2 100644
--- a/react/features/base/react/components/web/MultiSelectAutocomplete.tsx
+++ b/react/features/base/react/components/web/MultiSelectAutocomplete.tsx
@@ -163,7 +163,7 @@ class MultiSelectAutocomplete extends Component<IProps, IState> {
         const autoFocus = this.props.shouldFocus || false;
         const disabled = this.props.isDisabled || false;
         const placeholder = this.props.placeholder || '';
-        const noMatchesFound = this.props.noMatchesFound || '';
+        const noMatchesFound = this.state.loading ? this.props.loadingMessage : this.props.noMatchesFound || '';
         const errorDialog = this._renderError();
 
         return (
@@ -200,7 +200,7 @@ class MultiSelectAutocomplete extends Component<IProps, IState> {
             error: this.state.error && Boolean(filterValue),
             filterValue,
             isOpen: Boolean(this.state.items.length) && Boolean(filterValue),
-            items: filterValue ? this.state.items : [],
+            items: [],
             loading: Boolean(filterValue)
         });
         if (filterValue) {
diff --git a/react/features/base/ui/components/web/MultiSelect.tsx b/react/features/base/ui/components/web/MultiSelect.tsx
index 9bfc086dee..c8d875236d 100644
--- a/react/features/base/ui/components/web/MultiSelect.tsx
+++ b/react/features/base/ui/components/web/MultiSelect.tsx
@@ -24,6 +24,8 @@ interface IProps {
     selectedItems?: MultiSelectItem[];
 }
 
+const MULTI_SELECT_HEIGHT = 200;
+
 const useStyles = makeStyles()(theme => {
     return {
         container: {
@@ -41,7 +43,7 @@ const useStyles = makeStyles()(theme => {
             borderRadius: `${Number(theme.shape.borderRadius)}px`,
             ...withPixelLineHeight(theme.typography.bodyShortRegular),
             zIndex: 2,
-            maxHeight: '400px',
+            maxHeight: `${MULTI_SELECT_HEIGHT}px`,
             overflowY: 'auto',
             padding: '0'
         },
@@ -128,7 +130,7 @@ const MultiSelect = ({
                             </div>
                         </div>
                     ))
-                    : <div>{noMatchesText}</div>
+                    : <div className = { classes.listItem }>{noMatchesText}</div>
             }
         </div>
     ), [ items ]);