Web:Components:Fixed AccessRightSelect list not closing on the invitation panel on mobile and tablets when clicking outside the area.

packages/components/access-right-select/index.js

@@ -91,6 +91,7 @@ const AccessRightSelect = ({
         key: currentItem?.key,
         label: currentItem?.label,
       }}
+      forceCloseClickOutside={true}
       {...props}
     />
   );

packages/components/combobox/index.js

@@ -133,6 +133,7 @@ class ComboBox extends React.Component {
       isLoading,
       isNoFixedHeightOptions,
       hideMobileView,
+      forceCloseClickOutside,
     } = this.props;
     const { tabIndex, ...props } = this.props;
     const { isOpen, selectedOption } = this.state;
@@ -231,6 +232,7 @@ class ComboBox extends React.Component {
             withBackground={withBackground}
             isMobileView={isMobileView && !disableMobileView}
             isNoFixedHeightOptions={isNoFixedHeightOptions}
+            forceCloseClickOutside={forceCloseClickOutside}
           >
             {advancedOptions
               ? advancedOptions

packages/components/drop-down/index.js

@@ -53,6 +53,10 @@ class DropDown extends React.PureComponent {
   }
 
   componentDidMount() {
+    if (this.props.forceCloseClickOutside) {
+      window.addEventListener("click", this.onClickOutsideAccessRightSelect);
+    }
+
     if (this.props.open) {
       this.props.enableOnClickOutside();
       if (this.props.isDefaultMode) {
@@ -63,6 +67,10 @@ class DropDown extends React.PureComponent {
   }
 
   componentWillUnmount() {
+    if (this.props.forceCloseClickOutside) {
+      window.removeEventListener("click", this.onClickOutsideAccessRightSelect);
+    }
+
     this.props.disableOnClickOutside();
     this.unbindDocumentResizeListener();
   }
@@ -82,6 +90,11 @@ class DropDown extends React.PureComponent {
     }
   }
 
+  onClickOutsideAccessRightSelect = (e) => {
+    if (!this.props.open) return;
+    if (!this.dropDownRef.current.contains(e.target)) this.toggleDropDown(e);
+  };
+
   handleClickOutside = (e) => {
     if (e.type !== "touchstart") {
       e.preventDefault();

packages/components/selector/sub-components/Footer/index.tsx

@@ -107,6 +107,7 @@ const Footer = React.memo(
               showDisabledItems
               directionX={"right"}
               directionY={"top"}
+              forceCloseClickOutside={true}
             />
           )}