Fixes #3054

packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js

@@ -25,7 +25,7 @@ class SelectMany extends React.PureComponent {
   state = {
     isLoading: true,
     options: [],
-    toSkip: 0,
+    start: 0,
   };
 
   componentDidMount() {
@@ -34,8 +34,7 @@ class SelectMany extends React.PureComponent {
 
   componentDidUpdate(prevProps, prevState) {
     if (isEmpty(prevProps.record) && !isEmpty(this.props.record)) {
-      const values = (get(this.props.record, this.props.relation.alias) || [])
+      const values = (get(this.props.record, this.props.relation.alias) || []).map(el => el.id || el._id);
-        .map(el => (el.id || el._id));
 
       const options = this.state.options.filter(el => {
         return !values.includes(el.value.id || el.value._id);
@@ -44,7 +43,7 @@ class SelectMany extends React.PureComponent {
       this.state.options = options;
     }
 
-    if (prevState.toSkip !== this.state.toSkip) {
+    if (prevState.start !== this.state.start) {
       this.getOptions('');
     }
   }
@@ -52,7 +51,7 @@ class SelectMany extends React.PureComponent {
   getOptions = query => {
     const params = {
       _limit: 20,
-      _start: this.state.toSkip,
+      _start: this.state.start,
       source: this.props.relation.plugin || 'content-manager',
     };
 
@@ -72,11 +71,11 @@ class SelectMany extends React.PureComponent {
       params,
     })
       .then(response => {
+        /* eslint-disable indent */
         const options = isArray(response)
           ? response.map(item => ({
               value: item,
-            label: templateObject({ mainField: this.props.relation.displayedAttribute }, item)
+              label: templateObject({ mainField: this.props.relation.displayedAttribute }, item).mainField,
-              .mainField,
             }))
           : [
               {
@@ -84,7 +83,7 @@ class SelectMany extends React.PureComponent {
                 label: response[this.props.relation.displayedAttribute],
               },
             ];
-
+        /* eslint-enable indent */
         const newOptions = cloneDeep(this.state.options);
         options.map(option => {
           // Don't add the values when searching
@@ -103,19 +102,19 @@ class SelectMany extends React.PureComponent {
       });
   };
 
-  handleInputChange = (value) => {
+  handleInputChange = value => {
     const clonedOptions = this.state.options;
     const filteredValues = clonedOptions.filter(data => includes(data.label, value));
 
     if (filteredValues.length === 0) {
       return this.getOptions(value);
     }
-  }
+  };
 
   handleChange = value => {
     // Remove new added value from available option;
-    this.state.options = this.state.options.filter(el => 
+    this.state.options = this.state.options.filter(
-      !((el.value._id || el.value.id) === (value.value.id || value.value._id))
+      el => !((el.value._id || el.value.id) === (value.value.id || value.value._id)),
     );
 
     this.props.onAddRelationalItem({
@@ -127,12 +126,12 @@ class SelectMany extends React.PureComponent {
   handleBottomScroll = () => {
     this.setState(prevState => {
       return {
-        toSkip: prevState.toSkip + 20,
+        start: prevState.start + 1,
       };
     });
-  }
+  };
 
-  handleRemove = (index) => {
+  handleRemove = index => {
     const values = get(this.props.record, this.props.relation.alias);
 
     // Add removed value from available option;
@@ -149,7 +148,7 @@ class SelectMany extends React.PureComponent {
       key: this.props.relation.alias,
       index,
     });
-  }
+  };
 
   // Redirect to the edit page
   handleClick = (item = {}) => {
@@ -158,20 +157,18 @@ class SelectMany extends React.PureComponent {
       id: item.value.id || item.value._id,
       source: this.props.relation.plugin,
     });
-  }
+  };
 
   render() {
-    const description = this.props.relation.description ? (
+    const description = this.props.relation.description ? <p>{this.props.relation.description}</p> : '';
-      <p>{this.props.relation.description}</p>
-    ) : (
-      ''
-    );
     const value = get(this.props.record, this.props.relation.alias) || [];
 
     /* eslint-disable jsx-a11y/label-has-for */
     return (
       <div className={`form-group ${styles.selectMany} ${value.length > 4 && styles.selectManyUpdate}`}>
-        <label htmlFor={this.props.relation.alias}>{this.props.relation.alias} <span>({value.length})</span></label>
+        <label htmlFor={this.props.relation.alias}>
+          {this.props.relation.alias} <span>({value.length})</span>
+        </label>
         {description}
         <Select
           className={`${styles.select}`}
@@ -181,14 +178,14 @@ class SelectMany extends React.PureComponent {
           onInputChange={this.handleInputChange}
           onMenuScrollToBottom={this.handleBottomScroll}
           options={this.state.options}
-          placeholder={<FormattedMessage id='content-manager.containers.Edit.addAnItem' />}
+          placeholder={<FormattedMessage id="content-manager.containers.Edit.addAnItem" />}
         />
         <SortableList
           items={
+            /* eslint-disable indent */
             isNull(value) || isUndefined(value) || value.size === 0
               ? null
               : value.map(item => {
-
                   if (item) {
                     return {
                       value: get(item, 'value') || item,
@@ -201,6 +198,7 @@ class SelectMany extends React.PureComponent {
                   }
                 })
           }
+          /* eslint-enable indent */
           isDraggingSibling={this.props.isDraggingSibling}
           keys={this.props.relation.alias}
           moveAttr={this.props.moveAttr}