@zohodesk/components 1.0.0-temp-233 → 1.0.0-temp-234

package/es/MultiSelect/MultiSelect.js

@@ -81,6 +81,8 @@ export class MultiSelectComponent extends React.Component {
     this.handleSearchOptions = debounce(this.handleSearchOptions.bind(this), searchDebounceTime);
     this.handleScroll = this.handleScroll.bind(this);
     this.handleScrollFuncCall = debounce(this.handleScrollFuncCall.bind(this), 500);
+    this.getVirtualizerPublicMethods = this.getVirtualizerPublicMethods.bind(this);
+    this.setSuggestionsVirtualizerContainerRefFunction = this.setSuggestionsVirtualizerContainerRefFunction.bind(this);
   }
 
   componentDidMount() {
@@ -140,11 +142,6 @@ export class MultiSelectComponent extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const {
-      suggestionContainer,
-      selectedOptionContainer,
-      suggestionsOrder
-    } = this;
     const {
       hoverOption,
       highLightedSelectOptions,
@@ -156,7 +153,8 @@ export class MultiSelectComponent extends React.Component {
       isPopupOpen,
       onDropBoxClose,
       onDropBoxOpen,
-      isSearchClearOnClose
+      isSearchClearOnClose,
+      isVirtualizerEnabled
     } = this.props; //handle dropbox open & close
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
@@ -172,12 +170,23 @@ export class MultiSelectComponent extends React.Component {
     } //scrollTo handling
 
 
-    const hoverId = suggestionsOrder[hoverOption] || '';
-    const selectedSuggestion = this[`suggestion_${hoverId}`];
-    const lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
-    const selectedOption = this[`selectedOption_${lastHighLightedSelectOption}`];
-    isPopupOpen && scrollTo(suggestionContainer, selectedSuggestion);
-    selectedOptions.length && selectedOption && scrollTo(selectedOptionContainer, selectedOption); //When suggestions length less than 5, getNextOptions function call
+    if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+      let position = prevState.hoverOption > hoverOption ? 'top' : 'bottom';
+      this.virtualizerMethods.getElementVisiblePercentage(hoverOption) < 50 && this.virtualizerMethods.scrollToIndex(hoverOption, position);
+    } else {
+      const {
+        suggestionContainer,
+        selectedOptionContainer,
+        suggestionsOrder
+      } = this;
+      const hoverId = suggestionsOrder[hoverOption] || '';
+      const selectedSuggestion = this[`suggestion_${hoverId}`];
+      const lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
+      const selectedOption = this[`selectedOption_${lastHighLightedSelectOption}`];
+      isPopupOpen && scrollTo(suggestionContainer, selectedSuggestion);
+      selectedOptions.length && selectedOption && scrollTo(selectedOptionContainer, selectedOption);
+    } //When suggestions length less than 5, getNextOptions function call
+
 
     const {
       isNextOptions,
@@ -216,6 +225,7 @@ export class MultiSelectComponent extends React.Component {
       options,
       valueField,
       textField,
+      secondaryField,
       prefixText,
       disabledOptions,
       allowValueFallback,
@@ -229,6 +239,7 @@ export class MultiSelectComponent extends React.Component {
       optionType: 'default',
       disabledOptions,
       allowValueFallback,
+      secondaryField,
       searchFields
     });
   }
@@ -798,6 +809,7 @@ export class MultiSelectComponent extends React.Component {
 
   suggestionContainerRef(el) {
     this.suggestionContainer = el;
+    typeof this.setSuggestionsVirtualizerRef === 'function' && this.setSuggestionsVirtualizerRef(el);
   }
 
   suggestionItemRef(el, index, id) {
@@ -862,6 +874,15 @@ export class MultiSelectComponent extends React.Component {
     });
   }
 
+  getVirtualizerPublicMethods(methods) {
+    this.virtualizerMethods = methods;
+  }
+
+  setSuggestionsVirtualizerContainerRefFunction(refFunc) {
+    this.setSuggestionsVirtualizerRef = refFunc;
+    this.suggestionContainer && refFunc(this.suggestionContainer);
+  }
+
   getSelectionUI() {
     let isResponsive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     let {
@@ -1042,6 +1063,8 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
+      customProps,
+      isVirtualizerEnabled,
       limit
     } = this.props;
     const {
@@ -1065,6 +1088,9 @@ export class MultiSelectComponent extends React.Component {
       noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
     });
     let isModel = isMobilePopover(needResponsive);
+    let {
+      SuggestionsProps
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -1123,7 +1149,11 @@ export class MultiSelectComponent extends React.Component {
     }, isSearching ? /*#__PURE__*/React.createElement("div", {
       className: style[palette]
     }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      key: searchStr.trim(),
       suggestions: suggestions,
+      isVirtualizerEnabled: isVirtualizerEnabled,
+      getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
+      setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
       getRef: this.suggestionItemRef,
       hoverOption: hoverOption,
       onClick: this.handleSelectOption,
@@ -1136,7 +1166,8 @@ export class MultiSelectComponent extends React.Component {
         role: 'option'
       },
       limit: limit,
-      limitReachedMessage: limitReachedMessage
+      limitReachedMessage: limitReachedMessage,
+      ...SuggestionsProps
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/Suggestions.js

@@ -1,140 +1,114 @@
 /**** Libraries ****/
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Suggestions_propTypes } from "./props/propTypes";
 import { Suggestions_defaultProps } from "./props/defaultProps";
+import { Virtualizer } from '@zohodesk/virtualizer';
 /**** Components ****/
 
 import ListItem from "../ListItem/ListItem";
 import ListItemWithAvatar from "../ListItem/ListItemWithAvatar";
 import ListItemWithIcon from "../ListItem/ListItemWithIcon";
 import { Container, Box } from "../Layout";
+import { DUMMY_OBJECT, DUMMY_ARRAY } from "../utils/Common";
+
+function SuggestionsVirtualizerContainer(_ref) {
+  let {
+    eleRef,
+    children,
+    setVirtualizerContainerRefFunction
+  } = _ref;
+  useMemo(() => {
+    typeof setVirtualizerContainerRefFunction === 'function' && setVirtualizerContainerRefFunction(eleRef);
+  }, [eleRef, setVirtualizerContainerRefFunction]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
 export default class Suggestions extends React.PureComponent {
-  render() {
+  constructor(props) {
+    super(props);
+    this.renderSuggestionList = this.renderSuggestionList.bind(this);
+    this.renderVirtualizerSuggestionListItem = this.renderVirtualizerSuggestionListItem.bind(this);
+  }
+
+  renderSuggestionList(_ref2) {
+    let {
+      suggestion,
+      index,
+      ref
+    } = _ref2;
     const {
-      suggestions,
       getRef,
       hoverOption,
       onClick,
       onMouseEnter,
       needTick,
       needBorder,
-      selectedOptions = [],
+      selectedOptions = DUMMY_ARRAY,
       activeId,
       hoverId,
-      dataId,
       listItemSize,
-      className,
       avatarPalette,
       palette,
-      htmlId,
       a11y,
       needMultiLineText,
       limit,
       limitReachedMessage
     } = this.props;
     const {
-      ariaParentRole,
-      ariaMultiselectable
-    } = a11y;
+      id,
+      value,
+      secondaryValue,
+      photoURL,
+      icon,
+      optionType,
+      iconSize,
+      isDisabled,
+      listItemProps,
+      listItemCustomProps = DUMMY_OBJECT
+    } = suggestion;
+    const isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
+    const isHighlight = hoverOption === index || id === hoverId ? true : false;
     const selectedOptionsLength = selectedOptions.length;
-    return /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      role: ariaParentRole,
-      id: htmlId,
-      tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable
-    }, /*#__PURE__*/React.createElement(Box, {
-      dataId: `${dataId}`,
-      className: className ? className : ''
-    }, suggestions.map((suggestion, index) => {
-      const {
-        id,
-        value,
-        secondaryValue,
-        photoURL,
-        icon,
-        optionType,
-        iconSize,
-        isDisabled,
-        listItemProps,
-        listItemCustomProps = {}
-      } = suggestion;
-      const isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
-      const isHighlight = hoverOption === index || id === hoverId ? true : false;
-      const isLimitReached = selectedOptionsLength >= limit && !isActive;
-      const list_a11y = Object.assign({}, a11y, {
-        ariaSelected: isActive,
-        ariaLabel: value,
-        'data-a11y-list-active': isHighlight
-      });
-      const commonProps = {
-        isDisabled: isDisabled ? isDisabled : isLimitReached,
-        needMultiLineText,
-        ...listItemCustomProps
+    const isLimitReached = selectedOptionsLength >= limit && !isActive;
+    const list_a11y = Object.assign({}, a11y, {
+      ariaSelected: isActive,
+      ariaLabel: value,
+      'data-a11y-list-active': isHighlight
+    });
+    const commonProps = {
+      isDisabled: isDisabled ? isDisabled : isLimitReached,
+      needMultiLineText,
+      ...listItemCustomProps
+    };
+
+    if (listItemProps) {
+      commonProps.customProps = {
+        ListItemProps: { ...listItemProps
+        }
       };
+    }
 
-      if (listItemProps) {
-        commonProps.customProps = {
-          ListItemProps: { ...listItemProps
-          }
-        };
-      }
+    if (isLimitReached) {
+      commonProps.disableTitle = limitReachedMessage;
+    }
 
-      if (isLimitReached) {
-        commonProps.disableTitle = limitReachedMessage;
-      }
+    function getListItemRef(ele, index, id) {
+      ref && ref(ele);
 
-      if (optionType === 'avatar') {
-        return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
-          autoHover: false,
-          getRef: getRef,
-          highlight: isHighlight,
-          id: id,
-          imgSrc: photoURL,
-          key: `${id}avatarListItem`,
-          name: value,
-          onClick: onClick,
-          onMouseEnter: onMouseEnter,
-          value: value,
-          title: value,
-          needTick: needTick,
-          needBorder: needBorder,
-          active: isActive,
-          size: listItemSize,
-          avatarPalette: avatarPalette,
-          palette: palette,
-          a11y: list_a11y,
-          secondaryValue: secondaryValue
-        });
-      } else if (optionType === 'icon') {
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
-          autoHover: false,
-          getRef: getRef,
-          highlight: isHighlight,
-          id: id,
-          key: `${id}iconListItem`,
-          onClick: onClick,
-          onMouseEnter: onMouseEnter,
-          value: value,
-          title: value,
-          iconName: icon,
-          needTick: needTick,
-          needBorder: needBorder,
-          active: isActive,
-          iconSize: iconSize,
-          size: listItemSize,
-          palette: palette,
-          a11y: list_a11y,
-          secondaryValue: secondaryValue
-        });
+      if (typeof getRef === 'function') {
+        getRef(ele, index, id);
       }
+    }
 
-      return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
+    if (optionType === 'avatar') {
+      return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
         autoHover: false,
-        getRef: getRef,
+        getRef: getListItemRef,
         highlight: isHighlight,
         id: id,
-        key: `${id}listItem`,
+        imgSrc: photoURL,
+        key: `${id}avatarListItem`,
+        name: value,
         onClick: onClick,
         onMouseEnter: onMouseEnter,
         value: value,
@@ -143,8 +117,105 @@ export default class Suggestions extends React.PureComponent {
         needBorder: needBorder,
         active: isActive,
         size: listItemSize,
+        avatarPalette: avatarPalette,
         palette: palette,
-        a11y: list_a11y
+        a11y: list_a11y,
+        secondaryValue: secondaryValue
+      });
+    } else if (optionType === 'icon') {
+      return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
+        autoHover: false,
+        getRef: getListItemRef,
+        highlight: isHighlight,
+        id: id,
+        key: `${id}iconListItem`,
+        onClick: onClick,
+        onMouseEnter: onMouseEnter,
+        value: value,
+        title: value,
+        iconName: icon,
+        needTick: needTick,
+        needBorder: needBorder,
+        active: isActive,
+        iconSize: iconSize,
+        size: listItemSize,
+        palette: palette,
+        a11y: list_a11y,
+        secondaryValue: secondaryValue
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
+      autoHover: false,
+      getRef: getListItemRef,
+      highlight: isHighlight,
+      id: id,
+      key: `${id}listItem`,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      value: value,
+      title: value,
+      needTick: needTick,
+      needBorder: needBorder,
+      active: isActive,
+      size: listItemSize,
+      palette: palette,
+      a11y: list_a11y
+    });
+  }
+
+  renderVirtualizerSuggestionListItem(_ref3) {
+    let {
+      index,
+      ref
+    } = _ref3;
+    const {
+      suggestions
+    } = this.props;
+    const suggestion = suggestions[index];
+    return this.renderSuggestionList({
+      suggestion,
+      index,
+      ref
+    });
+  }
+
+  render() {
+    const {
+      suggestions,
+      dataId,
+      className,
+      isVirtualizerEnabled,
+      htmlId,
+      a11y,
+      getVirtualizerPublicMethods,
+      setVirtualizerContainerRefFunction
+    } = this.props;
+    const {
+      ariaParentRole,
+      ariaMultiselectable
+    } = a11y;
+    return /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      role: ariaParentRole,
+      id: htmlId,
+      tabindex: "0",
+      "aria-multiselectable": ariaMultiselectable
+    }, /*#__PURE__*/React.createElement(Box, {
+      dataId: `${dataId}`,
+      className: className ? className : ''
+    }, isVirtualizerEnabled ? /*#__PURE__*/React.createElement(Virtualizer, {
+      containerType: SuggestionsVirtualizerContainer,
+      elementRenderer: this.renderVirtualizerSuggestionListItem,
+      getExposedPublicMethods: getVirtualizerPublicMethods,
+      elementsCount: suggestions.length,
+      isElementsFixedHeight: false,
+      dataId: `${dataId}_virtualizer`,
+      setVirtualizerContainerRefFunction: setVirtualizerContainerRefFunction
+    }) : suggestions.map((suggestion, index) => {
+      return this.renderSuggestionList({
+        suggestion,
+        index
       });
     })));
   }

package/es/MultiSelect/props/defaultProps.js

@@ -86,6 +86,7 @@ export const MultiSelect_defaultProps = {
   autoComplete: getLibraryConfig('autoComplete'),
   dataId: 'multiSelect',
   dropBoxSize: 'small',
+  isVirtualizerEnabled: false,
   isAnimate: true,
   isDisabled: false,
   isPopupOpenOnEnter: false,
@@ -167,5 +168,6 @@ export const SelectedOptions_defaultProps = {
 };
 export const Suggestions_defaultProps = {
   a11y: {},
+  isVirtualizerEnabled: false,
   needMultiLineText: false
 };

package/es/MultiSelect/props/propTypes.js

@@ -31,6 +31,7 @@ export const MultiSelect_propTypes = {
   disableAction: PropTypes.bool,
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
   emptyMessage: PropTypes.string.isRequired,
+  isVirtualizerEnabled: PropTypes.bool,
   getContainerRef: PropTypes.func,
   getNextOptions: PropTypes.func,
   getPublicMethods: PropTypes.func,
@@ -168,6 +169,9 @@ export const Suggestions_propTypes = {
   avatarPalette: PropTypes.string,
   className: PropTypes.string,
   dataId: PropTypes.string,
+  isVirtualizerEnabled: PropTypes.bool,
+  setVirtualizerContainerRefFunction: PropTypes.func,
+  getVirtualizerPublicMethods: PropTypes.func,
   getRef: PropTypes.func,
   hoverId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   hoverOption: PropTypes.number,

package/es/Select/GroupSelect.js

@@ -622,7 +622,8 @@ export class GroupSelectComponent extends PureComponent {
     let ariaErrorId = this.getNextAriaId();
     let {
       TextBoxIconProps = {},
-      TextBoxProps = {}
+      TextBoxProps = {},
+      SuggestionsProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
@@ -791,7 +792,8 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           },
-          dataId: `${dataId}_Options`
+          dataId: `${dataId}_Options`,
+          ...SuggestionsProps
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/Select/Select.js

@@ -18,7 +18,7 @@ import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Methods ****/
 
-import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetSelectedValueText as makeGetSelectedValue } from "../utils/dropDownUtils";
+import { dummyObj, makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetSelectedValueText as makeGetSelectedValue } from "../utils/dropDownUtils";
 import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, getKeyValue } from "../utils/Common.js";
 /**** CSS ****/
 
@@ -106,6 +106,8 @@ export class SelectComponent extends Component {
     this.handleAddNewOption = this.handleAddNewOption.bind(this);
     this.handleExposePopupHandlers = this.handleExposePopupHandlers.bind(this);
     this.handleGetAddNewOptionText = this.handleGetAddNewOptionText.bind(this);
+    this.getVirtualizerPublicMethods = this.getVirtualizerPublicMethods.bind(this);
+    this.setSuggestionsVirtualizerContainerRefFunction = this.setSuggestionsVirtualizerContainerRefFunction.bind(this);
     this.valueInputTypeString = '';
     this.valueInputSearchString = '';
     this.autoSelectSuggestions = [];
@@ -173,11 +175,7 @@ export class SelectComponent extends Component {
     });
   }
 
-  componentDidUpdate(prevProps) {
-    let {
-      suggestionContainer,
-      optionsOrder
-    } = this;
+  componentDidUpdate(prevProps, prevState) {
     let {
       hoverIndex,
       searchStr,
@@ -190,15 +188,31 @@ export class SelectComponent extends Component {
       needSearch,
       onSearch,
       isPopupOpen,
-      isSearchClearOnClose
+      isSearchClearOnClose,
+      isVirtualizerEnabled
     } = this.props;
-    let hoverId = getIsEmptyValue(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
-    let selSuggestion = this[`suggestion_${hoverId}`];
-    isPopupOpen && scrollTo(suggestionContainer, selSuggestion);
+
+    if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+      let position = prevState.hoverIndex > hoverIndex ? 'top' : 'bottom';
+      this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex, position);
+    } else {
+      let {
+        suggestionContainer,
+        optionsOrder
+      } = this;
+      let hoverId = getIsEmptyValue(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
+      let selSuggestion = this[`suggestion_${hoverId}`];
+      isPopupOpen && scrollTo(suggestionContainer, selSuggestion);
+    }
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
       if (isPopupOpen) {
         onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
+
+        if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+          this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex);
+        }
+
         setTimeout(() => {
           this.searchInput && this.searchInput.focus({
             preventScroll: true
@@ -251,15 +265,19 @@ export class SelectComponent extends Component {
       valueField,
       textField,
       allowValueFallback,
-      customProps = {}
+      customProps = dummyObj,
+      searchFields,
+      secondaryField
     } = props;
     let {
-      listItemProps = {}
+      listItemProps = dummyObj
     } = customProps;
     return this.formatOptions({
       options,
       valueField,
       textField,
+      secondaryField,
+      searchFields,
       listItemProps,
       allowValueFallback
     });
@@ -429,6 +447,7 @@ export class SelectComponent extends Component {
   handleFilterSuggestions() {
     let {
       needLocalSearch,
+      searchFields,
       excludeOptions = dummyArray // needSearch
 
     } = this.props;
@@ -448,6 +467,7 @@ export class SelectComponent extends Component {
       options,
       selectedOptions: excludeOptions,
       searchStr,
+      searchFields,
       needSearch: needLocalSearch
     });
     this.optionsOrder = suggestionIds;
@@ -529,6 +549,7 @@ export class SelectComponent extends Component {
 
   suggestionContainerRef(el) {
     this.suggestionContainer = el;
+    typeof this.setSuggestionsVirtualizerRef === 'function' && this.setSuggestionsVirtualizerRef(el);
   }
 
   suggestionItemRef(el, index, id) {
@@ -676,6 +697,15 @@ export class SelectComponent extends Component {
     });
   }
 
+  getVirtualizerPublicMethods(methods) {
+    this.virtualizerMethods = methods;
+  }
+
+  setSuggestionsVirtualizerContainerRefFunction(refFunc) {
+    this.setSuggestionsVirtualizerRef = refFunc;
+    this.suggestionContainer && refFunc(this.suggestionContainer);
+  }
+
   render() {
     let {
       needSearch,
@@ -728,6 +758,7 @@ export class SelectComponent extends Component {
       targetOffset,
       isRestrictScroll,
       dropBoxPortalId,
+      isVirtualizerEnabled,
       renderCustomToggleIndicator,
       renderCustomSearchClearComponent
     } = this.props;
@@ -931,7 +962,11 @@ export class SelectComponent extends Component {
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
       }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+        key: searchStr.trim(),
         activeId: selectedId,
+        isVirtualizerEnabled: isVirtualizerEnabled,
+        getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
+        setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverIndex,