Fix dashboard filters get invisible while dragging & text selection while dragging (#18053)

frontend/src/metabase/admin/datamodel/components/database/ColumnsList.jsx

@@ -3,12 +3,12 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
 import _ from "underscore";
+
 import {
   SortableContainer,
   SortableElement,
   SortableHandle,
-} from "react-sortable-hoc";
-
+} from "metabase/components/sortable";
 import AccordionList from "metabase/components/AccordionList";
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
 import Icon from "metabase/components/Icon";

frontend/src/metabase/components/sortable/index.js

+export * from "./sortable";

frontend/src/metabase/components/sortable/sortable.css

+.react-sortable-hoc-helper {
+  z-index: 1000;
+}

frontend/src/metabase/components/sortable/sortable.jsx

+import React from "react";
+import PropTypes from "prop-types";
+import cx from "classnames";
+import styled from "styled-components";
+import {
+  SortableContainer as OriginalSortableContainer,
+  SortableElement,
+  SortableHandle,
+} from "react-sortable-hoc";
+import "./sortable.css";
+
+const SortableContainerWrapper = styled.div`
+  user-select: none;
+`;
+
+// Workaround for https://github.com/clauderic/react-sortable-hoc/issues/253
+// See issue demo here: https://github.com/metabase/metabase/issues/12870
+export function SortableContainer(WrappedComponent, config) {
+  const SortableList = OriginalSortableContainer(
+    props => (
+      <SortableContainerWrapper>
+        <WrappedComponent {...props} />
+      </SortableContainerWrapper>
+    ),
+    config,
+  );
+
+  // Makes sure the sortable-hoc always receives "react-sortable-hoc-helper" class
+  // The class just applies a big z-index to the dragged item created by sortable-hoc
+  // to prevent https://github.com/clauderic/react-sortable-hoc#item-disappearing-when-sorting--css-issues
+  function SortableListWithDraggedItemVisibilityFix({ helperClass, ...props }) {
+    return (
+      <SortableList
+        {...props}
+        helperClass={cx("react-sortable-hoc-helper", helperClass)}
+      />
+    );
+  }
+
+  SortableListWithDraggedItemVisibilityFix.displayName =
+    WrappedComponent.displayName;
+
+  SortableListWithDraggedItemVisibilityFix.propTypes = {
+    helperClass: PropTypes.string,
+  };
+
+  return SortableListWithDraggedItemVisibilityFix;
+}
+
+export { SortableElement, SortableHandle };

frontend/src/metabase/parameters/components/ParametersList.jsx

 /* eslint-disable react/prop-types */
 import React from "react";
-import {
-  SortableContainer,
-  SortableElement,
-  SortableHandle,
-} from "react-sortable-hoc";
 import cx from "classnames";
 
 import StaticParameterWidget from "./ParameterWidget";
 import Icon from "metabase/components/Icon";
+import {
+  SortableContainer,
+  SortableElement,
+  SortableHandle,
+} from "metabase/components/sortable";
 import {
   getValuePopulatedParameters,
   getVisibleParameters,

frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedColumns.jsx

@@ -3,13 +3,14 @@ import React, { Component } from "react";
 import { t } from "ttag";
 import _ from "underscore";
 
-import { SortableContainer, SortableElement } from "react-sortable-hoc";
-
+import {
+  SortableContainer,
+  SortableElement,
+} from "metabase/components/sortable";
 import StructuredQuery from "metabase-lib/lib/queries/StructuredQuery";
 import { keyForColumn, findColumnForColumnSetting } from "metabase/lib/dataset";
 import { getFriendlyName } from "metabase/visualizations/lib/utils";
 
-import { SortableColumnListContainer } from "./ChartSettingOrderedColumns.styled";
 import ColumnItem from "./ColumnItem";
 
 const SortableColumn = SortableElement(
@@ -26,7 +27,7 @@ const SortableColumn = SortableElement(
 const SortableColumnList = SortableContainer(
   ({ columnSettings, getColumnName, onEdit, onRemove }) => {
     return (
-      <SortableColumnListContainer>
+      <div>
         {columnSettings.map((columnSetting, index) => (
           <SortableColumn
             key={`item-${index}`}
@@ -37,7 +38,7 @@ const SortableColumnList = SortableContainer(
             onRemove={onRemove}
           />
         ))}
-      </SortableColumnListContainer>
+      </div>
     );
   },
 );
@@ -124,7 +125,6 @@ export default class ChartSettingOrderedColumns extends Component {
             onRemove={this.handleDisable}
             onSortEnd={this.handleSortEnd}
             distance={5}
-            helperClass="z5"
           />
         ) : (
           <div className="my2 p2 flex layout-centered bg-grey-0 text-light text-bold rounded">

frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedColumns.styled.jsx

-import styled from "styled-components";
-
-export const SortableColumnListContainer = styled.div`
-  user-select: none;
-`;

frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx

@@ -14,8 +14,10 @@ import ColorRangePicker, {
   ColorRangePreview,
 } from "metabase/components/ColorRangePicker";
 import NumericInput from "metabase/components/NumericInput";
-
-import { SortableContainer, SortableElement } from "react-sortable-hoc";
+import {
+  SortableContainer,
+  SortableElement,
+} from "metabase/components/sortable";
 
 import MetabaseAnalytics from "metabase/lib/analytics";
 import { isNumeric, isString } from "metabase/lib/schema_metadata";
@@ -215,7 +217,6 @@ const RuleListing = ({ rules, cols, onEdit, onAdd, onRemove, onMove }) => (
           onRemove={onRemove}
           onSortEnd={({ oldIndex, newIndex }) => onMove(oldIndex, newIndex)}
           distance={10}
-          helperClass="z5"
         />
       </div>
     ) : null}