}
+ { this.props.loadingIcon &&
+
+ { this.props.loadingIcon }
+
+ }
}
- { this.props.loadingIcon }
{ this.props.children }
@@ -332,15 +335,15 @@ MultiSelector.propTypes = {
color: PropTypes.string,
parent: PropTypes.string,
})).isRequired,
+ resetLabel: PropTypes.node,
selected: PropTypes.arrayOf(PropTypes.string).isRequired,
submitLabel: PropTypes.node.isRequired,
+ toggleAllLabel: PropTypes.node,
onDismiss: PropTypes.func,
onScrollBottom: PropTypes.func,
onSearchChange: PropTypes.func,
onSelectChange: PropTypes.func,
onSubmit: PropTypes.func.isRequired,
- toggleAllLabel: PropTypes.node,
- resetLabel: PropTypes.node,
};
export default MultiSelector;
diff --git a/src/app/components/layout/MultiSelector.module.css b/src/app/components/layout/MultiSelector.module.css
index d85f1432ef..ce0791bd43 100644
--- a/src/app/components/layout/MultiSelector.module.css
+++ b/src/app/components/layout/MultiSelector.module.css
@@ -20,6 +20,16 @@
}
}
+ .multiselector-scroller-loader {
+ background-color: var(--overlayWhite);
+ height: 100%;
+ left: 0;
+ max-height: 320px;
+ position: absolute;
+ right: 0;
+ z-index: 1;
+ }
+
.multiselector-scroller {
background-color: var(--color-gray-96);
height: 320px;
diff --git a/src/app/components/search/MultiSelectFilter.js b/src/app/components/search/MultiSelectFilter.js
index 71ba8ffc49..21fac0ab39 100644
--- a/src/app/components/search/MultiSelectFilter.js
+++ b/src/app/components/search/MultiSelectFilter.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/sort-prop-types */
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
@@ -252,7 +251,7 @@ const CustomSelectDropdown = ({
allowSearch={allowSearch}
hasMore={hasMore}
inputPlaceholder={inputPlaceholder || placeholder}
- loadingIcon={loading && }
+ loadingIcon={loading && }
notFoundLabel={!loading && inputPlaceholder ? (