@@ -253,8 +258,10 @@ const CollaboratorEditor = forwardRef(({
CollaboratorEditor.propTypes = {
saveImmediately: PropTypes.bool,
+ height: PropTypes.number,
column: PropTypes.object,
value: PropTypes.array,
+ editorPosition: PropTypes.object,
onCommit: PropTypes.func,
onClose: PropTypes.func,
onPressTab: PropTypes.func,
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/popup-editor-container.js b/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/popup-editor-container.js
index 80d6d00675..2ab9c0f97c 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/popup-editor-container.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/popup-editor-container.js
@@ -22,7 +22,7 @@ class PopupEditorContainer extends React.Component {
super(props);
const { column, width, height, left, top } = this.props;
let additionalStyles = {};
- if (column.type === CellType.SINGLE_SELECT) {
+ if (column.type === CellType.SINGLE_SELECT || column.type === CellType.MULTIPLE_SELECT) {
additionalStyles = { width, height };
}
this.state = {
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.css b/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.css
index 2f766cefb0..53bab4fa88 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.css
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.css
@@ -10,13 +10,17 @@
.sf-metadata-delete-select-options .sf-metadata-delete-select-option {
margin-top: 5px;
margin-bottom: 5px;
+ margin-right: 10px;
align-items: center;
+ max-width: 100% !important;
+ overflow: hidden
}
.sf-metadata-delete-select-options .sf-metadata-delete-select-option .sf-metadata-delete-select-remove {
height: 14px;
width: 14px;
- margin-left: 2px;
+ position: relative;
+ left: 2px;
}
.sf-metadata-delete-select-options .sf-metadata-delete-select-option .sf-metadata-icon-x-01 {
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.js b/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.js
index a0d9230812..76c55b6b4e 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.js
@@ -20,8 +20,6 @@ const DeleteOption = ({ value, options, onDelete }) => {
return [...selectedOptions, ...invalidOptions];
}, [options, value]);
- if (displayOptions.length === 0) return null;
-
return (
{displayOptions.map(option => {
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/index.js b/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/index.js
index d1c6fb6ce5..34b204e63a 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/index.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/index.js
@@ -11,9 +11,11 @@ import DeleteOption from './delete-options';
import './index.css';
const MultipleSelectEditor = forwardRef(({
+ height,
saveImmediately,
column,
value: oldValue,
+ editorPosition = { left: 0, top: 0 },
onCommit,
onPressTab,
modifyColumnData,
@@ -179,7 +181,8 @@ const MultipleSelectEditor = forwardRef(({
if (editorRef.current) {
const { bottom } = editorRef.current.getBoundingClientRect();
if (bottom > window.innerHeight) {
- editorRef.current.style.top = (parseInt(editorRef.current.style.top) - bottom + window.innerHeight) + 'px';
+ editorRef.current.style.top = 'unset';
+ editorRef.current.style.bottom = editorPosition.top + height - window.innerHeight + 'px';
}
}
if (editorContainerRef.current && selectItemRef.current) {
@@ -269,8 +272,10 @@ const MultipleSelectEditor = forwardRef(({
});
MultipleSelectEditor.propTypes = {
+ height: PropTypes.number,
column: PropTypes.object,
value: PropTypes.array,
+ editorPosition: PropTypes.object,
onCommit: PropTypes.func,
onPressTab: PropTypes.func,
};
diff --git a/frontend/src/metadata/metadata-view/components/cell-editor/single-select-editor/index.js b/frontend/src/metadata/metadata-view/components/cell-editor/single-select-editor/index.js
index c4e025bf43..000e9b378c 100644
--- a/frontend/src/metadata/metadata-view/components/cell-editor/single-select-editor/index.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/single-select-editor/index.js
@@ -15,6 +15,7 @@ const SingleSelectEditor = forwardRef(({
columns,
record,
value: oldValue,
+ editorPosition = { left: 0, top: 0 },
onCommit,
onPressTab,
modifyColumnData,
@@ -175,7 +176,8 @@ const SingleSelectEditor = forwardRef(({
if (editorRef.current) {
const { bottom } = editorRef.current.getBoundingClientRect();
if (bottom > window.innerHeight) {
- editorRef.current.style.top = (parseInt(editorRef.current.style.top) - bottom + window.innerHeight) + 'px';
+ editorRef.current.style.top = 'unset';
+ editorRef.current.style.bottom = editorPosition.top + height - window.innerHeight + 'px';
}
}
if (editorContainerRef.current && selectItemRef.current) {
@@ -269,6 +271,7 @@ SingleSelectEditor.propTypes = {
columns: PropTypes.array,
record: PropTypes.object,
value: PropTypes.string,
+ editorPosition: PropTypes.object,
onCommit: PropTypes.func,
onPressTab: PropTypes.func,
};
diff --git a/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.css b/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.css
index deb896d0cf..6cef818f9f 100644
--- a/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.css
+++ b/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.css
@@ -12,10 +12,6 @@
padding: 2px 6px;
}
-.sf-metadata-multiple-select-property-detail-editor .sf-metadata-delete-select-options .sf-metadata-delete-select-option {
- margin-right: 10px;
-}
-
.sf-metadata-multiple-select-property-editor-popover .sf-metadata-delete-select-options {
display: none;
}
diff --git a/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.js b/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.js
index 5361a8aa17..dbdf235a1a 100644
--- a/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.js
+++ b/frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.js
@@ -84,6 +84,13 @@ const MultipleSelectEditor = ({ field, value, record, fields, onChange, modifyCo
);
}, [showEditor, onCommit, record, value, modifyColumnData, fields, field]);
+ const isEmpty = useMemo(() => {
+ if (!Array.isArray(value) || value.length === 0) return true;
+ const selectedOptions = options.filter((option) => value.includes(option.id) || value.includes(option.name));
+ const invalidOptionIds = value.filter(optionId => optionId && !options.find(o => o.id === optionId || o.name === optionId));
+ return selectedOptions.length + invalidOptionIds.length === 0;
+ }, [options, value]);
+
return (
-
+ {!isEmpty && ()}
{renderEditor()}
);