diff --git a/src/app/components/cds/menus-lists-dialogs/TagPicker.js b/src/app/components/cds/menus-lists-dialogs/TagPicker.js index 926755e9b5..e2db21f15e 100644 --- a/src/app/components/cds/menus-lists-dialogs/TagPicker.js +++ b/src/app/components/cds/menus-lists-dialogs/TagPicker.js @@ -99,7 +99,7 @@ const TagPicker = ({ } hasMore={hasMore} inputPlaceholder={placeholder} - loadingIcon={loading && } + loadingIcon={loading && } notFoundLabel={ } + { 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 ? (