@zohodesk/components 1.2.41 → 1.2.43

package/README.md

@@ -32,6 +32,23 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.43
+
+- **AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar, GroupSelect, SelectWithIcon** - Fixed position support added.
+
+- **SelectWithAvatar, AdvancedGroupMultiSelect** - Fixed position support added and getTargetRef issue fixed.
+
+- **Tooltip** - Fixed white space attribute value from preWrap to pre-wrap.
+
+# 1.2.42
+
+- **Heading (v0&v1)** - 
+  - whiteSpace prop added
+
+- **Tooltip (v0&v1)** - 
+  - whiteSpace prop added
+  - `data-title-wrap` now accepts whitespace CSS values instead of a boolean, allowing the tooltip to support all whitespace options. Default value is `normal`.
+
 # 1.2.41
 
 - **Tabs** 

package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

@@ -27,7 +27,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           data-test-id="selectYear"
         >
           <h2
-            class="reset thMonYear"
+            class="reset  thMonYear"
             data-title="July 2023"
             tabindex="0"
           >

package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap

@@ -15,7 +15,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
       data-test-id="selectYear"
     >
       <h2
-        class="reset thMonYear"
+        class="reset  thMonYear"
         tabindex="0"
       />
       <span>

package/es/DateTime/__tests__/__snapshots__/YearView.spec.js.snap

@@ -35,7 +35,7 @@ exports[`YearView rendering the defult props 1`] = `
             data-test-id="boxComponent"
           >
             <h4
-              class="reset yearText"
+              class="reset  yearText"
               data-title="1850"
               tabindex="0"
             >

package/es/Heading/Heading.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
+import { whiteSpaceClassMapping } from '../utils/cssUtils';
 import style from './Heading.module.css';
 export default class Heading extends React.Component {
   render() {
@@ -12,15 +13,17 @@ export default class Heading extends React.Component {
       title,
       dataTitle,
       dataId,
-      a11y
+      a11y,
+      whiteSpace
     } = this.props;
     return /*#__PURE__*/React.createElement(tagName, {
-      className: `${style.reset} ${className}`,
+      className: `${style.reset} ${whiteSpace ? whiteSpaceClassMapping[whiteSpace] : ''} ${className}`,
       onClick,
       onDoubleClick,
       'data-title': dataTitle || title,
       'data-id': dataId,
       'data-test-id': dataId,
+      'data-title-wrap': whiteSpace,
       ...a11y
     }, title);
   }

package/es/Heading/__tests__/Heading.spec.js

@@ -8,4 +8,13 @@ describe('Heading', () => {
     } = render( /*#__PURE__*/React.createElement(Heading, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  const whiteSpace = ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'];
+  test.each(whiteSpace)('Should render whiteSpace of Heading - %s', whiteSpace => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Heading, {
+      whiteSpace: whiteSpace
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/Heading/__tests__/__snapshots__/Heading.spec.js.snap

@@ -1,9 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_breakSpaces "
+    data-title-wrap="break-spaces"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_normal "
+    data-title-wrap="normal"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_nowrap "
+    data-title-wrap="nowrap"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_pre "
+    data-title-wrap="pre"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_preLine "
+    data-title-wrap="pre-line"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_preWrap "
+    data-title-wrap="pre-wrap"
+  />
+</DocumentFragment>
+`;
+
 exports[`Heading rendering the defult props 1`] = `
 <DocumentFragment>
   <h1
-    class="reset "
+    class="reset  "
   />
 </DocumentFragment>
 `;

package/es/Heading/props/propTypes.js

@@ -7,5 +7,6 @@ export const propTypes = {
   dataTitle: PropTypes.string,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
-  a11y: PropTypes.object
+  a11y: PropTypes.object,
+  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
 };

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -852,6 +852,10 @@ class AdvancedGroupMultiSelect extends React.Component {
       dropBoxSize,
       position,
       getContainerRef,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       emptyMessage,
       searchEmptyMessage,
       title,
@@ -870,7 +874,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       a11y,
       palette,
       needEffect,
-      autoComplete
+      autoComplete,
+      getTargetRef
     } = this.props;
     let {
       clearText = 'Clear all'
@@ -910,7 +915,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       align: "vertical",
       alignBox: "row",
       onClick: this.togglePopup,
-      className: customClass
+      className: customClass,
+      eleRef: getTargetRef
     }, children) : /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
@@ -994,6 +1000,10 @@ class AdvancedGroupMultiSelect extends React.Component {
         needResponsive: needResponsive,
         isPadding: isPadding,
         isBoxPaddingNeed: !needSelectAll,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         htmlId: setAriaId,
         a11y: {
           role: 'listbox',

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -368,7 +368,11 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       disabledOptions,
       isLoading,
       dataSelectorId,
-      customClass
+      customClass,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -508,6 +512,10 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           ariaMultiselectable: true
         },
         dataId: `${dataIdMultiSelectComp}_dropbox`,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         ...DropBoxProps,
         alignBox: "row",
         isResponsivePadding: getFooter ? false : true

package/es/MultiSelect/MultiSelect.js

@@ -992,6 +992,10 @@ export class MultiSelectComponent extends React.Component {
       borderColor,
       disableAction,
       isBoxPaddingNeed,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       palette,
       i18nKeys,
       getFooter,
@@ -1039,6 +1043,10 @@ export class MultiSelectComponent extends React.Component {
       needResponsive: needResponsive,
       isPadding: false,
       isBoxPaddingNeed: isBoxPaddingNeed,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll,
       palette: palette,
       htmlId: setAriaId,
       a11y: {

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -68,6 +68,10 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       selectAllText,
       getContainerRef,
       removeClose,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       isAnimate,
       animationStyle,
       isDisabled,
@@ -124,6 +128,10 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       needResponsive: needResponsive,
       isPadding: false,
       isBoxPaddingNeed: isBoxPaddingNeed,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll,
       palette: palette,
       htmlId: setAriaId,
       a11y: {

package/es/MultiSelect/props/defaultProps.js

@@ -32,6 +32,8 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   i18nKeys: {},
   a11y: {},
   isSearchClearOnSelect: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   needEffect: true,
   palette: 'default',
   isLoading: false,
@@ -67,7 +69,9 @@ export const AdvancedMultiSelect_defaultProps = {
   needEffect: true,
   isLoading: false,
   dataSelectorId: 'advancedMultiSelect',
-  customClass: {}
+  customClass: {},
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false
 };
 export const EmptyState_defaultProps = {
   dataId: 'empty',
@@ -104,6 +108,8 @@ export const MultiSelect_defaultProps = {
   textBoxClass: '',
   palette: 'default',
   isSearchClearOnSelect: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
@@ -142,6 +148,8 @@ export const MultiSelectWithAvatar_defaultProps = {
   palette: 'default',
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   needEffect: true,
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',

package/es/MultiSelect/props/propTypes.js

@@ -98,6 +98,10 @@ export const MultiSelect_propTypes = {
   getFooter: PropTypes.func,
   needEffect: PropTypes.bool,
   boxSize: PropTypes.string,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   keepSelectedOptions: PropTypes.bool,
@@ -230,6 +234,10 @@ export const AdvancedGroupMultiSelect_propTypes = {
   textField: PropTypes.string,
   getTargetRef: PropTypes.func,
   togglePopup: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   needLocalSearch: PropTypes.bool,
   isNextOptions: PropTypes.bool,
   getNextOptions: PropTypes.func,

package/es/Select/GroupSelect.js

@@ -576,6 +576,10 @@ export class GroupSelectComponent extends PureComponent {
       getContainerRef,
       isPopupReady,
       removeClose,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       borderColor,
       needTick,
       children,
@@ -705,6 +709,10 @@ export class GroupSelectComponent extends PureComponent {
         onClick: removeClose,
         needResponsive: needResponsive,
         isPadding: false,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         isResponsivePadding: getFooter ? false : true,
         alignBox: "row",
         dataId: `${dataId}_suggestionBox`

package/es/Select/SelectWithAvatar.js

@@ -133,6 +133,10 @@ class SelectWithAvatarComponent extends SelectComponent {
       isPopupOpen,
       removeClose,
       isPopupReady,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       animationStyle,
       textBoxSize,
       textBoxVariant,
@@ -158,7 +162,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       htmlId,
       needEffect,
       isLoading,
-      dataSelectorId
+      dataSelectorId,
+      getTargetRef
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -190,7 +195,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       align: "vertical",
       alignBox: "row",
       className: `${style.container} ${style[size]} ${style[`borderColor_${borderColor}`]} ${isActive && needBorder ? style.active : ''} ${textBoxClass ? textBoxClass : ''} ${needBorder ? style.hasBorder : ''}`,
-      eleRef: this.getTargetRef,
+      eleRef: getTargetRef,
       onClick: !isDisabled && this.togglePopup
     }, selectedId ? /*#__PURE__*/React.createElement(Box, {
       className: style.tag,
@@ -256,6 +261,10 @@ class SelectWithAvatarComponent extends SelectComponent {
         isArrow: false,
         onClick: removeClose,
         needResponsive: needResponsive,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         isPadding: false,
         isResponsivePadding: true,
         alignBox: "row",

package/es/Select/SelectWithIcon.js

@@ -323,6 +323,10 @@ class SelectWithIcon extends Component {
       isPopupReady,
       position,
       getContainerRef,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       valueKey,
       idKey,
       needListBorder,
@@ -453,6 +457,10 @@ class SelectWithIcon extends Component {
         onClick: removeClose,
         getRef: getContainerRef,
         needResponsive: needResponsive,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         dataId: `${dataId}_suggestions`,
         size: boxSize,
         isPadding: false,

package/es/Select/props/defaultProps.js

@@ -65,6 +65,8 @@ export const GroupSelect_defaultProps = {
   needTick: true,
   needLocalSearch: true,
   isSearchClearOnClose: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false
@@ -89,6 +91,8 @@ export const SelectWithAvatar_defaultProps = {
   dataSelectorId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   i18nKeys: {},
   needEffect: true,
   isLoading: false
@@ -117,5 +121,7 @@ export const SelectWithIcon_defaultProps = {
   iconSize: '14',
   i18nKeys: {},
   isLoading: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   customProps: {}
 };

package/es/Select/props/propTypes.js

@@ -90,8 +90,8 @@ export const Select_propTypes = {
   isAbsolutePositioningNeeded: PropTypes.bool,
   openPopupOnly: PropTypes.bool,
   ariaLabelledby: PropTypes.string,
-  positionsOffset: PropTypes.array,
-  targetOffset: PropTypes.array,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   isRestrictScroll: PropTypes.bool,
   dropBoxPortalId: PropTypes.string
 };
@@ -162,6 +162,10 @@ export const GroupSelect_propTypes = {
   closePopupOnly: PropTypes.func,
   position: PropTypes.string,
   removeClose: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   i18nKeys: PropTypes.shape({
     loadingText: PropTypes.string,
     emptyText: PropTypes.string,
@@ -286,6 +290,10 @@ export const SelectWithIcon_propTypes = {
   needResponsive: PropTypes.bool,
   boxSize: PropTypes.string,
   emptyMessage: PropTypes.string,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,

package/es/Tooltip/Tooltip.js

@@ -2,9 +2,10 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { getLibraryConfig } from '../Provider/Config';
-import style from './Tooltip.module.css';
 import ResizeObserver from '../Responsive/ResizeObserver';
 import selectn from 'selectn';
+import { whiteSpaceClassMapping } from '../utils/cssUtils';
+import style from './Tooltip.module.css';
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);
@@ -192,7 +193,8 @@ export default class Tooltip extends React.Component {
 
         let isHtml = titleDiv.getAttribute('data-ishtml');
         let dataTooltipnoArrow = titleDiv.getAttribute('data-tooltip-noarrow') === 'true' ? true : false;
-        let dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') === 'true' ? true : false;
+        let dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') || 'normal'; // values: normal, pre, pre-wrap, pre-line, nowrap, break-spaces
+
         let clientRect = titleDiv.getBoundingClientRect();
         let boxLayout = this.getClientRectOfContEl(containerElement);
         this.setState({
@@ -481,7 +483,15 @@ export default class Tooltip extends React.Component {
     } = this.props;
     let arrowStyle = isArrowHorizontal ? isArrowRight ? style.arrowRight : style.arrowLeft : isArrowDown ? style.arrowDown : style.arrowUp;
     title = title ? title.trim() : null;
-    let tooltipCss = `${style.tooltipcont} ${dataTooltipWrap ? style.tooltipWrapCont : style.tooltipNormalCont}`;
+    let tooltipWhiteSpaceModification = dataTooltipWrap;
+
+    if (dataTooltipWrap == 'pre') {
+      tooltipWhiteSpaceModification = 'pre-wrap';
+    } else if (dataTooltipWrap == 'nowrap') {
+      tooltipWhiteSpaceModification = 'normal';
+    }
+
+    let tooltipCss = `${style.tooltipcont} ${whiteSpaceClassMapping[tooltipWhiteSpaceModification]}`;
     return title ? /*#__PURE__*/React.createElement("div", {
       className: `${customClass} ${style.tooltiptext}`,
       style: {

package/es/Tooltip/Tooltip.module.css

@@ -26,14 +26,6 @@
   border-color: transparent;
   border-radius: var(--zd_size4);
 }
-
-.tooltipWrapCont {
-  white-space: pre-wrap;
-}
-
-.tooltipNormalCont {
-  white-space: normal;
-}
 .tooltiparrow {
   content: '';
   position: absolute;

package/es/common/common.module.css

@@ -522,4 +522,28 @@
 .fitContHeight {
   height: fit-content ;
   height: -moz-fit-content ;
+}
+
+.whiteSpace_normal {
+  white-space: normal;
+}
+
+.whiteSpace_nowrap {
+  white-space: nowrap;
+}
+
+.whiteSpace_pre {
+  white-space: pre;
+}
+
+.whiteSpace_preLine {
+  white-space: pre-line;
+}
+
+.whiteSpace_preWrap {
+  white-space: pre-wrap;
+}
+
+.whiteSpace_breakSpaces {
+  white-space: break-spaces
 }

package/es/utils/cssUtils.js

@@ -0,0 +1,11 @@
+import commonStyle from '../common/common.module.css';
+export const whiteSpaceClassMapping = {
+  // eslint-disable-next-line dot-notation
+  'normal': commonStyle.whiteSpace_normal,
+  'pre': commonStyle.whiteSpace_pre,
+  'pre-wrap': commonStyle.whiteSpace_preWrap,
+  'pre-line': commonStyle.whiteSpace_preLine,
+  // eslint-disable-next-line dot-notation
+  'nowrap': commonStyle.whiteSpace_nowrap,
+  'break-spaces': commonStyle.whiteSpace_breakSpaces
+};

package/es/v1/Heading/Heading.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
+import { whiteSpaceClassMapping } from '../../utils/cssUtils';
 import style from '../../Heading/Heading.module.css';
 export default function Heading(props) {
   let {
@@ -11,15 +12,17 @@ export default function Heading(props) {
     title,
     dataTitle,
     dataId,
-    a11y
+    a11y,
+    whiteSpace
   } = props;
   return /*#__PURE__*/React.createElement(tagName, {
-    className: `${style.reset} ${className}`,
+    className: `${style.reset} ${whiteSpace ? whiteSpaceClassMapping[whiteSpace] : ''} ${className}`,
     onClick,
     onDoubleClick,
     'data-title': dataTitle || title,
     'data-id': dataId,
     'data-test-id': dataId,
+    'data-title-wrap': whiteSpace,
     ...a11y
   }, title);
 }

package/es/v1/Heading/props/propTypes.js

@@ -7,5 +7,6 @@ export const propTypes = {
   dataTitle: PropTypes.string,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
-  a11y: PropTypes.object
+  a11y: PropTypes.object,
+  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
 };

package/es/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -853,6 +853,10 @@ class AdvancedGroupMultiSelect extends React.Component {
       dropBoxSize,
       position,
       getContainerRef,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       emptyMessage,
       searchEmptyMessage,
       title,
@@ -871,7 +875,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       a11y,
       palette,
       needEffect,
-      autoComplete
+      autoComplete,
+      getTargetRef
     } = this.props;
     let {
       clearText = 'Clear all'
@@ -911,7 +916,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       align: "vertical",
       alignBox: "row",
       onClick: this.togglePopup,
-      className: customClass
+      className: customClass,
+      eleRef: getTargetRef
     }, children) : /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",