Fixes #5805

Signed-off-by: soupette <cyril.lpz@gmail.com>

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

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import pluginId from '../../pluginId';
 import IconRemove from '../../assets/images/icon_remove.svg';
+import { Span } from './components';
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 
@@ -18,7 +19,7 @@ const Relation = ({ data, mainField, onRemove, to }) => {
         <FormattedMessage id={`${pluginId}.containers.Edit.clickToJump`}>
           {title => (
             <Link to={to} title={title}>
-              <span>{data[mainField]}</span>
+              <Span>{data[mainField]}</Span>
             </Link>
           )}
         </FormattedMessage>

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

@@ -97,10 +97,8 @@ const Li = styled.li`
     > a:hover {
       text-decoration: none;
     }
-    span {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+    > a {
+      max-width: 100%;
     }
 
     &:first-of-type {
@@ -145,4 +143,12 @@ const Li = styled.li`
   }
 `;
 
-export { ListShadow, ListWrapper, Li };
+const Span = styled.span`
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export { ListShadow, ListWrapper, Li, Span };

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

@@ -23,6 +23,7 @@ function SelectMany({
   onRemove,
   options,
   placeholder,
+  styles,
   targetModel,
   value,
 }) {
@@ -62,8 +63,7 @@ function SelectMany({
         id={name}
         filterOption={(candidate, input) => {
           if (!isEmpty(value)) {
-            const isSelected =
-              value.findIndex(item => item.id === candidate.value.id) !== -1;
+            const isSelected = value.findIndex(item => item.id === candidate.value.id) !== -1;
 
             if (isSelected) {
               return false;
@@ -85,6 +85,7 @@ function SelectMany({
         onMenuClose={onMenuClose}
         onMenuScrollToBottom={onMenuScrollToBottom}
         placeholder={placeholder}
+        styles={styles}
         value={[]}
       />
 
@@ -130,6 +131,7 @@ SelectMany.propTypes = {
   onRemove: PropTypes.func.isRequired,
   options: PropTypes.array.isRequired,
   placeholder: PropTypes.node.isRequired,
+  styles: PropTypes.object.isRequired,
   targetModel: PropTypes.string.isRequired,
   value: PropTypes.array,
 };

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

@@ -15,6 +15,7 @@ function SelectOne({
   onMenuScrollToBottom,
   options,
   placeholder,
+  styles,
   value,
 }) {
   return (
@@ -29,9 +30,8 @@ function SelectOne({
       onMenuClose={onMenuClose}
       onMenuScrollToBottom={onMenuScrollToBottom}
       placeholder={placeholder}
-      value={
-        isNull(value) ? null : { label: get(value, [mainField], ''), value }
-      }
+      styles={styles}
+      value={isNull(value) ? null : { label: get(value, [mainField], ''), value }}
     />
   );
 }
@@ -51,6 +51,7 @@ SelectOne.propTypes = {
   onMenuScrollToBottom: PropTypes.func.isRequired,
   options: PropTypes.array.isRequired,
   placeholder: PropTypes.node.isRequired,
+  styles: PropTypes.object.isRequired,
   value: PropTypes.object,
 };
 

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

@@ -155,6 +155,18 @@ function SelectWrapper({
   const Component = isSingle ? SelectOne : SelectMany;
   const associationsLength = isArray(value) ? value.length : 0;
 
+  const customStyles = {
+    option: provided => {
+      return {
+        ...provided,
+        maxWidth: '100% !important',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      };
+    },
+  };
+
   return (
     <Wrapper className="form-group">
       <Nav>
@@ -198,6 +210,7 @@ function SelectWrapper({
             placeholder
           )
         }
+        styles={customStyles}
         targetModel={targetModel}
         value={value}
       />