fix: prevent duplicate entries in list widget with relation field

Author: Bianka Drabova

packages/decap-cms-widget-list/src/ListControl.js

@@ -427,6 +427,30 @@ export default class ListControl extends React.Component {
       const withNameKey =
         this.getValueType() !== valueTypes.SINGLE ||
         (this.getValueType() === valueTypes.SINGLE && listFieldObjectWidget);
+
+      if (f.get('widget') === 'relation') {
+        const isDuplicate =
+          value &&
+          value.some((item, idx) => {
+            if (idx === index) return false;
+            const itemValue = withNameKey ? item.get(f.get('name')) : item;
+            return itemValue === newValue;
+          });
+
+        if (isDuplicate) {
+          console.warn(`⚠️ Duplicate: "${newValue}" already selected`);
+
+          this.duplicateErrorIndex = index;
+          this.forceUpdate();
+
+          return;
+        }
+      }
+
+      if (this.duplicateErrorIndex === index) {
+        this.duplicateErrorIndex = null;
+      }
+
       const newObjectValue = withNameKey
         ? this.getObjectValue(index).set(f.get('name'), newValue)
         : newValue;
@@ -652,6 +676,9 @@ export default class ListControl extends React.Component {
     let field = this.props.field;
     const hasError = this.hasError(index);
     const isVariableTypesList = this.getValueType() === valueTypes.MIXED;
+
+    const hasDuplicateError = this.duplicateErrorIndex === index;
+
     if (isVariableTypesList) {
       field = getTypedFieldForValue(field, item);
       if (!field) {
@@ -667,6 +694,22 @@ export default class ListControl extends React.Component {
         id={key}
         keys={keys}
       >
+        {hasDuplicateError && (
+          <div
+            style={{
+              background: '#fee',
+              color: '#c33',
+              padding: '12px',
+              marginBottom: '12px',
+              borderRadius: '4px',
+              border: '1px solid #fcc',
+              fontSize: '14px',
+              fontWeight: 'bold',
+            }}
+          >
+            ❌ This entry is already selected in this list
+          </div>
+        )}
         {isVariableTypesList && (
           <LabelComponent
             field={field}
@@ -810,10 +853,8 @@ export default class ListControl extends React.Component {
   }
 
   render() {
-    if (this.getValueType() !== null) {
-      return this.renderListControl();
-    } else {
-      return this.renderInput();
-    }
+    return (
+      <div>{this.getValueType() !== null ? this.renderListControl() : this.renderInput()}</div>
+    );
   }
 }

packages/decap-cms-widget-list/src/__tests__/ListControl.spec.js

@@ -789,4 +789,117 @@ describe('ListControl', () => {
     listControl.validate();
     expect(props.onValidateObject).toHaveBeenCalledWith('forID', []);
   });
+
+  it('should prevent duplicate relation entries', () => {
+    const field = fromJS({
+      name: 'featured_posts',
+      label: 'Featured Posts',
+      widget: 'list',
+      field: {
+        name: 'featured_entries',
+        widget: 'relation',
+        collection: 'posts',
+      },
+    });
+
+    const { getByTestId } = render(
+      <ListControl
+        {...props}
+        field={field}
+        value={fromJS([
+          { featured_entries: 'post-1' },
+          { featured_entries: 'post-2' },
+        ])}
+      />,
+    );
+
+    const listControl = new ListControl({
+      ...props,
+      field,
+      value: fromJS([
+        { featured_entries: 'post-1' },
+        { featured_entries: 'post-2' },
+      ]),
+    });
+
+    const handleChange = listControl.handleChangeFor(0);
+    const relationField = fromJS({
+      widget: 'relation',
+      name: 'featured_entries',
+    });
+
+    handleChange(relationField, 'post-2');
+
+    expect(props.onChange).not.toHaveBeenCalled();
+    
+    expect(listControl.duplicateErrorIndex).toBe(0);
+  });
+
+  it('should allow non-duplicate relation entries', () => {
+    const field = fromJS({
+      name: 'featured_posts',
+      label: 'Featured Posts',
+      widget: 'list',
+      field: {
+        name: 'featured_entries',
+        widget: 'relation',
+        collection: 'posts',
+      },
+    });
+
+    const listControl = new ListControl({
+      ...props,
+      field,
+      value: fromJS([
+        { featured_entries: 'post-1' },
+        { featured_entries: 'post-2' },
+      ]),
+    });
+
+    const handleChange = listControl.handleChangeFor(0);
+    const relationField = fromJS({
+      widget: 'relation',
+      name: 'featured_entries',
+    });
+
+    handleChange(relationField, 'post-new');
+
+    expect(props.onChange).toHaveBeenCalled();
+    
+    expect(listControl.duplicateErrorIndex).toBeNull();
+  });
+
+  it('should clear duplicate error when value changes', () => {
+    const field = fromJS({
+      name: 'featured_posts',
+      label: 'Featured Posts',
+      widget: 'list',
+      field: {
+        name: 'featured_entries',
+        widget: 'relation',
+        collection: 'posts',
+      },
+    });
+
+    const listControl = new ListControl({
+      ...props,
+      field,
+      value: fromJS([
+        { featured_entries: 'post-1' },
+        { featured_entries: 'post-2' },
+      ]),
+    });
+
+    listControl.duplicateErrorIndex = 0;
+
+    const handleChange = listControl.handleChangeFor(0);
+    const relationField = fromJS({
+      widget: 'relation',
+      name: 'featured_entries',
+    });
+
+    handleChange(relationField, 'post-new');
+
+    expect(listControl.duplicateErrorIndex).toBeNull();
+  });
 });