diff --git a/packages/react-ui-components/src/MultiSelectBox/__snapshots__/multiSelectBox.spec.js.snap b/packages/react-ui-components/src/MultiSelectBox/__snapshots__/multiSelectBox.spec.js.snap
index f80ef82090..21c533efe2 100644
--- a/packages/react-ui-components/src/MultiSelectBox/__snapshots__/multiSelectBox.spec.js.snap
+++ b/packages/react-ui-components/src/MultiSelectBox/__snapshots__/multiSelectBox.spec.js.snap
@@ -13,6 +13,7 @@ exports[` should render correctly. 1`] = `
ListPreviewElement={[Function]}
MultiSelectBox_ListPreviewSortable={[Function]}
SelectBox={[Function]}
+ allowDragging={true}
allowEmpty={true}
dndType="multiselect-box-value"
onCreateNew={[MockFunction]}
@@ -28,6 +29,7 @@ exports[` should render correctly. 1`] = `
ListPreviewElement={[Function]}
MultiSelectBox_ListPreviewSortable={[Function]}
SelectBox={[Function]}
+ allowDragging={true}
allowEmpty={true}
dndType="multiselect-box-value"
onCreateNew={[MockFunction]}
diff --git a/packages/react-ui-components/src/MultiSelectBox/multiSelectBox.js b/packages/react-ui-components/src/MultiSelectBox/multiSelectBox.js
index 0574f842cc..9d01c64ca0 100644
--- a/packages/react-ui-components/src/MultiSelectBox/multiSelectBox.js
+++ b/packages/react-ui-components/src/MultiSelectBox/multiSelectBox.js
@@ -31,6 +31,11 @@ class MultiSelectBox extends PureComponent {
*/
disabled: PropTypes.bool,
+ /**
+ * Allows dragging.
+ */
+ allowDragging: PropTypes.bool,
+
/**
* Additional className wich will be applied
*/
@@ -165,6 +170,7 @@ class MultiSelectBox extends PureComponent {
optionValueField: 'value',
dndType: 'multiselect-box-value',
allowEmpty: true,
+ allowDragging: true,
ListPreviewElement: SelectBox_Option_SingleLine
}
diff --git a/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable/multiSelectBox_ListPreviewSortable.js b/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable/multiSelectBox_ListPreviewSortable.js
index c26222feaf..e5094e1af6 100644
--- a/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable/multiSelectBox_ListPreviewSortable.js
+++ b/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable/multiSelectBox_ListPreviewSortable.js
@@ -31,6 +31,7 @@ export default class MultiSelectBox_ListPreviewSortable extends PureComponent {
values: PropTypes.arrayOf(PropTypes.string),
onValuesChange: PropTypes.func.isRequired,
ListPreviewElement: PropTypes.any.isRequired,
+ allowDragging: PropTypes.bool,
// API with MultiSelectBox
optionValueAccessor: PropTypes.func.isRequired
diff --git a/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable_DraggableListPreviewElement/multiSelectBox_ListPreviewSortable_DraggableListPreviewElement.js b/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable_DraggableListPreviewElement/multiSelectBox_ListPreviewSortable_DraggableListPreviewElement.js
index 569956bacf..530d7a3611 100644
--- a/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable_DraggableListPreviewElement/multiSelectBox_ListPreviewSortable_DraggableListPreviewElement.js
+++ b/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable_DraggableListPreviewElement/multiSelectBox_ListPreviewSortable_DraggableListPreviewElement.js
@@ -48,8 +48,8 @@ const spec = {
index: props.index
};
},
- canDrag({values, disabled}) {
- return !disabled && (values && values.length > 1);
+ canDrag({values, disabled, allowDragging}) {
+ return allowDragging && !disabled && (values && values.length > 1);
}
}, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
@@ -65,6 +65,7 @@ export default class MultiSelectBox_ListPreviewSortable_DraggableListPreviewElem
}),
values: PropTypes.arrayOf(PropTypes.string),
disabled: PropTypes.bool,
+ allowDragging: PropTypes.bool,
// Drag&Drop specific propTypes
dndType: PropTypes.string.isRequired,
@@ -103,6 +104,7 @@ export default class MultiSelectBox_ListPreviewSortable_DraggableListPreviewElem
const {
option,
disabled,
+ allowDragging,
connectDragSource,
connectDropTarget,
isDragging,
@@ -117,7 +119,7 @@ export default class MultiSelectBox_ListPreviewSortable_DraggableListPreviewElem
// TODO Loading State: const {icon, label} = option || {label: `[Loading ${value}]`};
- const isDraggable = !disabled && (values && values.length > 1);
+ const isDraggable = allowDragging && !disabled && (values && values.length > 1);
const finalClassNames = mergeClassNames({
[theme.selectedOptions__item]: true,