From 056fe260cdcabe17bea847903d281eca52947470 Mon Sep 17 00:00:00 2001
From: Tatiana Lopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Tue, 31 May 2022 09:37:06 +0300
Subject: [PATCH] Web: Files: Removed  scroll sticking if you try to move the
 scroll slider.

---
 .../panels/SelectFileDialog/AsideView.js      | 152 +++++++------
 .../SelectionPanel/SelectionPanelBody.js      | 204 +++++++++---------
 2 files changed, 170 insertions(+), 186 deletions(-)

diff --git a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js
index 9f67e52d8b..f012c0ba16 100644
--- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js
+++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js
@@ -33,92 +33,86 @@ const SelectFileDialogAsideView = ({
   maxInputWidth,
   newFilter,
 }) => {
-  const onMouseEvent = (event) => {
-    event.stopPropagation();
-  };
-
   return (
-    <div onMouseUp={onMouseEvent} onMouseDown={onMouseEvent}>
-      <ModalDialog
-        visible={isPanelVisible}
-        onClose={onClose}
-        contentHeight="100%"
-        contentPaddingBottom="0px"
-        displayType="aside"
-        withoutBodyScroll
-      >
-        <ModalDialog.Header>{dialogName}</ModalDialog.Header>
-        <ModalDialog.Body className="select-file_body-modal-dialog">
-          <StyledAsideBody theme={theme}>
-            <div className="selection-panel_aside-body">
-              <div className="selection-panel_folder-info">
-                <Text
-                  className="selection-panel_folder-selection-title"
-                  fontWeight={600}
-                >
-                  {t("Translations:FolderSelection")}
-                </Text>
+    <ModalDialog
+      visible={isPanelVisible}
+      onClose={onClose}
+      contentHeight="100%"
+      contentPaddingBottom="0px"
+      displayType="aside"
+      withoutBodyScroll
+    >
+      <ModalDialog.Header>{dialogName}</ModalDialog.Header>
+      <ModalDialog.Body className="select-file_body-modal-dialog">
+        <StyledAsideBody theme={theme}>
+          <div className="selection-panel_aside-body">
+            <div className="selection-panel_folder-info">
+              <Text
+                className="selection-panel_folder-selection-title"
+                fontWeight={600}
+              >
+                {t("Translations:FolderSelection")}
+              </Text>
 
-                <SelectFolderInput
-                  theme={theme}
-                  onClickInput={onClickInput}
-                  onClose={onCloseSelectFolderDialog}
-                  onSelectFolder={onSelectFolder}
-                  isPanelVisible={isFolderPanelVisible}
-                  foldersType={foldersType}
-                  withoutProvider={withoutProvider}
-                  id={folderId}
-                  onSelectFile={onSelectFile}
-                  displayType="aside"
-                  hasNextPage={hasNextPage}
-                  isNextPageLoading={isNextPageLoading}
-                  loadNextPage={loadNextPage}
-                  files={files}
-                  folderTree={resultingFolderTree}
-                  isFolderTreeLoading={!!!resultingFolderTree}
-                  isNeedArrowIcon
-                  maxInputWidth={maxInputWidth ? maxInputWidth : "446px"}
-                />
+              <SelectFolderInput
+                theme={theme}
+                onClickInput={onClickInput}
+                onClose={onCloseSelectFolderDialog}
+                onSelectFolder={onSelectFolder}
+                isPanelVisible={isFolderPanelVisible}
+                foldersType={foldersType}
+                withoutProvider={withoutProvider}
+                id={folderId}
+                onSelectFile={onSelectFile}
+                displayType="aside"
+                hasNextPage={hasNextPage}
+                isNextPageLoading={isNextPageLoading}
+                loadNextPage={loadNextPage}
+                files={files}
+                folderTree={resultingFolderTree}
+                isFolderTreeLoading={!!!resultingFolderTree}
+                isNeedArrowIcon
+                maxInputWidth={maxInputWidth ? maxInputWidth : "446px"}
+              />
 
-                <Text color="#A3A9AE" className="selection-panel_aside-title">
-                  {filesListTitle}
-                </Text>
-              </div>
-              <div className="selection-panel_files">
-                <FilesListWrapper
+              <Text color="#A3A9AE" className="selection-panel_aside-title">
+                {filesListTitle}
+              </Text>
+            </div>
+            <div className="selection-panel_files">
+              <FilesListWrapper
+                theme={theme}
+                onSelectFile={onSelectFile}
+                folderId={folderId}
+                displayType="aside"
+                folderSelection={false}
+                fileId={fileId}
+                newFilter={newFilter}
+              />
+            </div>
+            <div className="selection-panel_aside-footer">
+              {footer}
+              <div className="selection-panel_aside-buttons">
+                <Button
                   theme={theme}
-                  onSelectFile={onSelectFile}
-                  folderId={folderId}
-                  displayType="aside"
-                  folderSelection={false}
-                  fileId={fileId}
-                  newFilter={newFilter}
+                  primary
+                  size="normalTouchscreen"
+                  label={primaryButtonName}
+                  onClick={onButtonClick}
+                  isDisabled={!fileId}
+                />
+                <Button
+                  theme={theme}
+                  size="normalTouchscreen"
+                  label={t("Common:CancelButton")}
+                  onClick={onClose}
                 />
-              </div>
-              <div className="selection-panel_aside-footer">
-                {footer}
-                <div className="selection-panel_aside-buttons">
-                  <Button
-                    theme={theme}
-                    primary
-                    size="normalTouchscreen"
-                    label={primaryButtonName}
-                    onClick={onButtonClick}
-                    isDisabled={!fileId}
-                  />
-                  <Button
-                    theme={theme}
-                    size="normalTouchscreen"
-                    label={t("Common:CancelButton")}
-                    onClick={onClose}
-                  />
-                </div>
               </div>
             </div>
-          </StyledAsideBody>
-        </ModalDialog.Body>
-      </ModalDialog>
-    </div>
+          </div>
+        </StyledAsideBody>
+      </ModalDialog.Body>
+    </ModalDialog>
   );
 };
 export default SelectFileDialogAsideView;
diff --git a/products/ASC.Files/Client/src/components/panels/SelectionPanel/SelectionPanelBody.js b/products/ASC.Files/Client/src/components/panels/SelectionPanel/SelectionPanelBody.js
index 26a66a0b30..79859fbafc 100644
--- a/products/ASC.Files/Client/src/components/panels/SelectionPanel/SelectionPanelBody.js
+++ b/products/ASC.Files/Client/src/components/panels/SelectionPanel/SelectionPanelBody.js
@@ -47,119 +47,109 @@ const SelectionPanelBody = ({
   isDisableButton,
   parentId,
 }) => {
-  const onMouseEvent = (event) => {
-    event.stopPropagation();
-  };
-
   return (
-    <div onMouseUp={onMouseEvent} onMouseDown={onMouseEvent}>
-      <StyledModalDialog
-        theme={theme}
-        visible={isPanelVisible}
-        onClose={onClose}
-        className="select-file-modal-dialog"
-        style={{ maxWidth: "773px" }}
-        displayType="modal"
-        modalBodyPadding="0px"
-        isLoading={isLoading}
-      >
-        <ModalDialog.Header theme={theme}>{dialogName}</ModalDialog.Header>
-        <ModalDialog.Body
-          theme={theme}
-          className="select-file_body-modal-dialog"
-        >
-          <StyledBody header={!!header} footer={!!footer}>
-            <div className="selection-panel_body">
-              <div className="selection-panel_tree-body">
-                <Text
-                  fontWeight="700"
-                  fontSize="18px"
-                  className="selection-panel_folder-title"
-                >
-                  {t("Common:Documents")}
-                </Text>
+    <StyledModalDialog
+      theme={theme}
+      visible={isPanelVisible}
+      onClose={onClose}
+      style={{ maxWidth: "773px" }}
+      displayType="modal"
+      modalBodyPadding="0px"
+      isLoading={isLoading}
+    >
+      <ModalDialog.Header theme={theme}>{dialogName}</ModalDialog.Header>
+      <ModalDialog.Body theme={theme} className="select-file_body-modal-dialog">
+        <StyledBody header={!!header} footer={!!footer}>
+          <div className="selection-panel_body">
+            <div className="selection-panel_tree-body">
+              <Text
+                fontWeight="700"
+                fontSize="18px"
+                className="selection-panel_folder-title"
+              >
+                {t("Common:Documents")}
+              </Text>
 
-                {folderId && resultingFolderTree ? (
-                  <FolderTreeBody
+              {folderId && resultingFolderTree ? (
+                <FolderTreeBody
+                  theme={theme}
+                  folderTree={resultingFolderTree}
+                  onSelect={onSelectFolder}
+                  withoutProvider={withoutProvider}
+                  certainFolders
+                  isAvailable={isAvailable}
+                  selectedKeys={[`${folderId}`]}
+                  parentId={parentId}
+                  expandedKeys={expandedKeys}
+                  isDisableTree={isDisableTree}
+                  displayType="modal"
+                />
+              ) : (
+                <Loaders.NewTreeFolders />
+              )}
+            </div>
+            <div className="selection-panel_files-body">
+              <>
+                <div className="selection-panel_files-header">
+                  {header}
+
+                  <Text
+                    color="#A3A9AE"
                     theme={theme}
-                    folderTree={resultingFolderTree}
-                    onSelect={onSelectFolder}
-                    withoutProvider={withoutProvider}
-                    certainFolders
-                    isAvailable={isAvailable}
-                    selectedKeys={[`${folderId}`]}
-                    parentId={parentId}
-                    expandedKeys={expandedKeys}
-                    isDisableTree={isDisableTree}
-                    displayType="modal"
-                  />
-                ) : (
-                  <Loaders.NewTreeFolders />
-                )}
-              </div>
-              <div className="selection-panel_files-body">
-                <>
-                  <div className="selection-panel_files-header">
-                    {header}
-
-                    <Text
-                      color="#A3A9AE"
-                      theme={theme}
-                      className="selection-panel_title"
-                    >
-                      {folderSelection
-                        ? t("FolderContents", { folderTitle })
-                        : filesListTitle}
-                    </Text>
-                  </div>
-
-                  <FilesListWrapper
-                    theme={theme}
-                    onSelectFile={onSelectFile}
-                    folderId={folderId}
-                    displayType={"modal"}
-                    folderSelection={folderSelection}
-                    newFilter={newFilter}
-                    fileId={fileId}
-                  />
-                </>
-              </div>
-
-              <div className="selection-panel_footer">
-                <div>{footer}</div>
-
-                <div className="selection-panel_buttons">
-                  <Button
-                    theme={theme}
-                    className="select-file-modal-dialog-buttons-save"
-                    primary
-                    size="normalTouchscreen"
-                    label={primaryButtonName}
-                    onClick={onButtonClick}
-                    isDisabled={
-                      isDisableButton ||
-                      isDisableTree ||
-                      isLoadingData ||
-                      (!fileId && !folderSelection) ||
-                      !canCreate
-                    }
-                    isLoading={isDisableTree}
-                  />
-                  <Button
-                    theme={theme}
-                    className="modal-dialog-button"
-                    size="normalTouchscreen"
-                    label={t("Common:CancelButton")}
-                    onClick={onClose}
-                    isDisabled={isLoadingData}
-                  />
+                    className="selection-panel_title"
+                  >
+                    {folderSelection
+                      ? t("FolderContents", { folderTitle })
+                      : filesListTitle}
+                  </Text>
                 </div>
+
+                <FilesListWrapper
+                  theme={theme}
+                  onSelectFile={onSelectFile}
+                  folderId={folderId}
+                  displayType={"modal"}
+                  folderSelection={folderSelection}
+                  newFilter={newFilter}
+                  fileId={fileId}
+                />
+              </>
+            </div>
+
+            <div className="selection-panel_footer">
+              <div>{footer}</div>
+
+              <div className="selection-panel_buttons">
+                <Button
+                  theme={theme}
+                  className="select-file-modal-dialog-buttons-save"
+                  primary
+                  size="normalTouchscreen"
+                  label={primaryButtonName}
+                  onClick={onButtonClick}
+                  isDisabled={
+                    isDisableButton ||
+                    isDisableTree ||
+                    isLoadingData ||
+                    (!fileId && !folderSelection) ||
+                    !canCreate
+                  }
+                  isLoading={isDisableTree}
+                />
+                <Button
+                  theme={theme}
+                  className="modal-dialog-button"
+                  size="normalTouchscreen"
+                  label={t("Common:CancelButton")}
+                  onClick={onClose}
+                  isDisabled={isLoadingData}
+                />
               </div>
             </div>
-          </StyledBody>
-        </ModalDialog.Body>
-      </StyledModalDialog>
-    </div>
+          </div>
+        </StyledBody>
+      </ModalDialog.Body>
+    </StyledModalDialog>
   );
 };