Web:Fixed missing scroll when opening user roles. Fixed the view of the list of user roles when the mobile phone is in a horizontal position.

packages/client/src/components/panels/InvitePanel/sub-components/AccessSelector.js

@@ -14,6 +14,7 @@ const AccessSelector = ({
   isOwner,
   withRemove = false,
   filteredAccesses,
+  setIsOpenItemAccess,
 }) => {
   const [horizontalOrientation, setHorizontalOrientation] = useState(false);
   const width = containerRef?.current?.offsetWidth - 32;
@@ -48,10 +49,6 @@ const AccessSelector = ({
 
   const isMobileHorizontalOrientation = isMobileOnly && horizontalOrientation;
 
-  const setDropDownMaxHeight = isMobileHorizontalOrientation
-    ? { dropDownMaxHeight: 150 }
-    : {};
-
   return (
     <StyledAccessSelector className="invite-panel_access-selector">
       <AccessRightSelect
@@ -60,17 +57,14 @@ const AccessSelector = ({
         accessOptions={filteredAccesses ? filteredAccesses : accessOptions}
         noBorder={false}
         directionX="right"
-        directionY={isMobileHorizontalOrientation ? "both" : "bottom"}
-        fixedDirection={isMobileHorizontalOrientation ? false : true}
+        directionY="bottom"
+        fixedDirection={true}
         manualWidth={width + "px"}
-        isDefaultMode={
-          isMobileHorizontalOrientation ? isMobileHorizontalOrientation : false
-        }
-        withBackdrop={isMobileHorizontalOrientation ? false : isMobileOnly}
-        isAside={true}
+        isDefaultMode={false}
+        isAside={false}
         withBackground={isMobileHorizontalOrientation ? false : isMobileOnly}
-        isNoFixedHeightOptions={isMobileHorizontalOrientation}
-        {...setDropDownMaxHeight}
+        setIsOpenItemAccess={setIsOpenItemAccess}
+        hideMobileView={isMobileHorizontalOrientation}
       />
     </StyledAccessSelector>
   );

packages/client/src/components/panels/InvitePanel/sub-components/Item.js

@@ -29,6 +29,7 @@ const Item = ({
   roomType,
   isOwner,
   inputsRef,
+  setIsOpenItemAccess,
 }) => {
   const { avatar, displayName, email, id, errors, access } = item;
 
@@ -141,6 +142,7 @@ const Item = ({
           isOwner={isOwner}
           withRemove={true}
           filteredAccesses={filteredAccesses}
+          setIsOpenItemAccess={setIsOpenItemAccess}
         />
       )}
     </>

packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js

@@ -20,6 +20,7 @@ const Row = memo(({ data, index, style }) => {
     roomType,
     isOwner,
     inputsRef,
+    setIsOpenItemAccess,
   } = data;
 
   if (inviteItems === undefined) return;
@@ -38,6 +39,7 @@ const Row = memo(({ data, index, style }) => {
         roomType={roomType}
         isOwner={isOwner}
         inputsRef={inputsRef}
+        setIsOpenItemAccess={setIsOpenItemAccess}
       />
     </StyledRow>
   );
@@ -58,7 +60,7 @@ const ItemsList = ({
   const [bodyHeight, setBodyHeight] = useState(0);
   const [offsetTop, setOffsetTop] = useState(0);
   const [isTotalListHeight, setIsTotalListHeight] = useState(false);
-
+  const [isOpenItemAccess, setIsOpenItemAccess] = useState(false);
   const bodyRef = useRef();
   const { height } = useResizeObserver({ ref: bodyRef });
 
@@ -69,7 +71,11 @@ const ItemsList = ({
     const listAreaHeight = heightList;
 
     const calculatedHeight = scrollAllPanelContent
-      ? Math.max(totalHeightItems, listAreaHeight, 0)
+      ? Math.max(
+          totalHeightItems,
+          listAreaHeight,
+          isOpenItemAccess ? scrollHeight : 0
+        )
       : heightList - FOOTER_HEIGHT;
 
     setBodyHeight(calculatedHeight);
@@ -84,6 +90,7 @@ const ItemsList = ({
     bodyRef?.current?.offsetHeight,
     inviteItems.length,
     scrollAllPanelContent,
+    isOpenItemAccess,
   ]);
 
   useEffect(() => {
@@ -94,6 +101,7 @@ const ItemsList = ({
     height,
     inviteItems.length,
     scrollAllPanelContent,
+    isOpenItemAccess,
   ]);
 
   const overflowStyle = scrollAllPanelContent ? "hidden" : "scroll";
@@ -119,6 +127,7 @@ const ItemsList = ({
           roomType,
           isOwner,
           inputsRef,
+          setIsOpenItemAccess,
           t,
         }}
         outerElementType={!scrollAllPanelContent && CustomScrollbarsVirtualList}

packages/components/combobox/index.js

@@ -129,6 +129,7 @@ class ComboBox extends React.Component {
       withoutPadding,
       isLoading,
       isNoFixedHeightOptions,
+      hideMobileView,
     } = this.props;
 
     const { tabIndex, ...props } = this.props;
@@ -170,7 +171,7 @@ class ComboBox extends React.Component {
         : 6;
     }
 
-    const disableMobileView = optionsCount < 4;
+    const disableMobileView = optionsCount < 4 || hideMobileView;
 
     return (
       <StyledComboBox