diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js index 72dd4e9670..8a1f80449a 100644 --- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js +++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js @@ -28,7 +28,7 @@ const fillAvailableWidth = css` const StyledInvitePanel = styled.div` .invite-panel-body { height: ${(props) => - props.hasInvitedUsers ? "calc(100% - 55px - 73px)" : "calc(100% - 55px)"}; + props.hasInvitedUsers ? "calc(100% - 55px - 70px)" : "calc(100% - 55px)"}; .scroll-body { padding-right: 0px !important; @@ -39,7 +39,7 @@ const StyledInvitePanel = styled.div` const ScrollList = styled.div` width: 100%; height: ${(props) => - props.scrollAllPanelContent + props.scrollAllPanelContent && props.isTotalListHeight ? "auto" : props.offsetTop && `calc(100% - ${props.offsetTop}px)`}; `; diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/Item.js b/packages/client/src/components/panels/InvitePanel/sub-components/Item.js index ce86d44611..ebb1d8f939 100644 --- a/packages/client/src/components/panels/InvitePanel/sub-components/Item.js +++ b/packages/client/src/components/panels/InvitePanel/sub-components/Item.js @@ -27,6 +27,7 @@ const Item = ({ setHasErrors, roomType, isOwner, + setIsOpenItemAccess, }) => { const { avatar, displayName, email, id, errors, access } = item; @@ -144,6 +145,7 @@ const Item = ({ directionY="bottom" isDefaultMode={false} fixedDirection={true} + setIsOpenItemAccess={setIsOpenItemAccess} /> )} diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js b/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js index bf2c922b96..c1912fb853 100644 --- a/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js +++ b/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js @@ -19,6 +19,7 @@ const Row = memo(({ data, index, style }) => { setHasErrors, roomType, isOwner, + setIsOpenItemAccess, } = data; if (inviteItems === undefined) return; @@ -36,6 +37,7 @@ const Row = memo(({ data, index, style }) => { setHasErrors={setHasErrors} roomType={roomType} isOwner={isOwner} + setIsOpenItemAccess={setIsOpenItemAccess} /> ); @@ -54,23 +56,39 @@ 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 }); const onBodyResize = useCallback(() => { + const scrollHeight = bodyRef?.current?.firstChild.scrollHeight; const heightList = height ? height : bodyRef.current.offsetHeight; + const totalHeightItems = inviteItems.length * USER_ITEM_HEIGHT; + const listAreaHeight = heightList; const calculatedHeight = scrollAllPanelContent - ? inviteItems.length * USER_ITEM_HEIGHT + ? Math.max( + totalHeightItems, + listAreaHeight, + isOpenItemAccess ? scrollHeight : 0 + ) : heightList - FOOTER_HEIGHT; setBodyHeight(calculatedHeight); setOffsetTop(bodyRef.current.offsetTop); + + if (scrollAllPanelContent && totalHeightItems && listAreaHeight) + setIsTotalListHeight( + totalHeightItems >= listAreaHeight && totalHeightItems >= scrollHeight + ); }, [ height, bodyRef?.current?.offsetHeight, inviteItems.length, scrollAllPanelContent, + isOpenItemAccess, ]); useEffect(() => { @@ -81,28 +99,23 @@ const ItemsList = ({ height, inviteItems.length, scrollAllPanelContent, + isOpenItemAccess, ]); - let itemCount = inviteItems.length; - - //Scroll blinking fix - if (scrollAllPanelContent) { - itemCount = - bodyHeight / inviteItems.length != USER_ITEM_HEIGHT - ? inviteItems.length - 1 - : inviteItems.length; - } + const overflowStyle = scrollAllPanelContent ? "hidden" : "scroll"; return ( {Row} diff --git a/packages/components/combobox/index.js b/packages/components/combobox/index.js index 5de830f8bb..e2750d5eeb 100644 --- a/packages/components/combobox/index.js +++ b/packages/components/combobox/index.js @@ -28,14 +28,21 @@ class ComboBox extends React.Component { stopAction = (e) => e.preventDefault(); - setIsOpen = (isOpen) => this.setState({ isOpen: isOpen }); + setIsOpen = (isOpen) => { + this.setState({ isOpen: isOpen }); + this.props.setIsOpenItemAccess(isOpen); + }; handleClickOutside = (e) => { + const { setIsOpenItemAccess } = this.props; + if (this.ref.current.contains(e.target)) return; this.setState({ isOpen: !this.state.isOpen }, () => { this.props.toggleAction && this.props.toggleAction(e, this.state.isOpen); }); + + setIsOpenItemAccess && setIsOpenItemAccess(!this.state.isOpen); }; comboBoxClick = (e) => { @@ -45,6 +52,7 @@ class ComboBox extends React.Component { isDisabled, toggleAction, isLoading, + setIsOpenItemAccess, } = this.props; if ( @@ -59,20 +67,24 @@ class ComboBox extends React.Component { this.setState({ isOpen: !this.state.isOpen }, () => { toggleAction && toggleAction(e, this.state.isOpen); }); + setIsOpenItemAccess && setIsOpenItemAccess(!this.state.isOpen); }; optionClick = (option) => { + const { setIsOpenItemAccess } = this.props; this.setState({ isOpen: !this.state.isOpen, selectedOption: option, }); - + setIsOpenItemAccess && setIsOpenItemAccess(!this.state.isOpen); this.props.onSelect && this.props.onSelect(option); }; componentDidUpdate(prevProps) { + const { setIsOpenItemAccess } = this.props; if (this.props.opened !== prevProps.opened) { this.setIsOpen(this.props.opened); + setIsOpenItemAccess && setIsOpenItemAccess(this.props.opened); } if (this.props.selectedOption !== prevProps.selectedOption) {