Merge pull request #4812 from open-formulieren/bug/4802-react-select-…

…styling-for-large-values

Broken react select styling for large values

src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js

@@ -325,7 +325,7 @@ export const DraftDocumentTypesFeatureFlagOn = {
         rsin: '111111111',
         domain: 'TEST',
       },
-      iotSubmissionReport: 'A rather long draft description',
+      iotSubmissionReport: 'Document type 4 with a rather long draft description',
       iotSubmissionCsv: 'Not-found documenttype',
     },
   },

src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/DocumentTypes.js

@@ -3,6 +3,7 @@ import {useField, useFormikContext} from 'formik';
 import PropTypes from 'prop-types';
 import {useContext, useEffect} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
+import {components} from 'react-select';
 import {useAsync, usePrevious} from 'react-use';
 
 import {FeatureFlagsContext} from 'components/admin/form_design/Context';
@@ -42,28 +43,36 @@ const getDocumentTypes = async (apiGroupID, catalogueUrl) => {
   const documentTypes = response.data.sort((a, b) => a.omschrijving.localeCompare(b.omschrijving));
   return documentTypes.map(({omschrijving, isPublished}) => ({
     value: omschrijving,
-    label: (
+    label: omschrijving,
+    isPublished: isPublished,
+  }));
+};
+
+// Components
+
+const DocumentTypeSelectOption = props => {
+  const {isPublished, label} = props.data;
+  return (
+    <components.Option {...props}>
       <span
         className={classNames('catalogi-type-option', {
           'catalogi-type-option--draft': !isPublished,
         })}
       >
         <FormattedMessage
           description="Document type option label"
-          defaultMessage={`{omschrijving} {isPublished, select, false {<draft>(not published)</draft>} other {}}`}
+          defaultMessage={`{label} {isPublished, select, false {<draft>(not published)</draft>} other {}}`}
           values={{
-            omschrijving,
+            label,
             isPublished,
             draft: chunks => <span className="catalogi-type-option__draft-suffix">{chunks}</span>,
           }}
         />
       </span>
-    ),
-  }));
+    </components.Option>
+  );
 };
 
-// Components
-
 const DocumentType = ({name, label, loading, options, isDisabled, helpText}) => {
   const intl = useIntl();
   const [{value}, , fieldHelpers] = useField(name);
@@ -91,6 +100,7 @@ const DocumentType = ({name, label, loading, options, isDisabled, helpText}) =>
               setValue(selectedOption ? selectedOption.value : undefined);
             }}
             isClearable
+            components={{Option: DocumentTypeSelectOption}}
           />
           {showWarning && (
             <WarningIcon

src/openforms/js/components/admin/form_design/registrations/objectsapi/mocks.js

@@ -105,7 +105,7 @@ const DOCUMENT_TYPES = {
     },
     {
       url: 'https://example.com/catalogi/api/v1/iot/13',
-      omschrijving: 'A rather long draft description',
+      omschrijving: 'Document type 4 with a rather long draft description',
       catalogusLabel: 'TEST (111111111)',
       isPublished: false,
     },

src/openforms/js/components/admin/form_design/registrations/zgw/fields/CaseTypeSelect.js

@@ -1,7 +1,9 @@
 import classNames from 'classnames';
 import {useField, useFormikContext} from 'formik';
 import PropTypes from 'prop-types';
+import React from 'react';
 import {FormattedMessage} from 'react-intl';
+import {components} from 'react-select';
 import useAsync from 'react-use/esm/useAsync';
 
 import Field from 'components/admin/forms/Field';
@@ -22,24 +24,34 @@ const getAvailableCaseTypes = async (apiGroupID, catalogueUrl) => {
   const caseTypes = response.data.sort((a, b) => a.description.localeCompare(b.description));
   return caseTypes.map(({identification, description, isPublished}) => ({
     value: identification,
-    label: (
+    label: description,
+    isPublished: isPublished,
+  }));
+};
+
+// Components
+
+const CaseTypeSelectOption = props => {
+  const {isPublished, label} = props.data;
+  return (
+    <components.Option {...props}>
       <span
         className={classNames('catalogi-type-option', {
           'catalogi-type-option--draft': !isPublished,
         })}
       >
         <FormattedMessage
           description="Case type option label"
-          defaultMessage={`{description} {isPublished, select, false {<draft>(not published)</draft>} other {}}`}
+          defaultMessage={`{label} {isPublished, select, false {<draft>(not published)</draft>} other {}}`}
           values={{
-            description,
+            label,
             isPublished,
             draft: chunks => <span className="catalogi-type-option__draft-suffix">{chunks}</span>,
           }}
         />
       </span>
-    ),
-  }));
+    </components.Option>
+  );
 };
 
 const CaseTypeSelect = ({catalogueUrl = ''}) => {
@@ -88,6 +100,7 @@ const CaseTypeSelect = ({catalogueUrl = ''}) => {
           // TODO: make required once legacy config is dropped
           required={false}
           isClearable
+          components={{Option: CaseTypeSelectOption}}
           onChange={selectedOption => {
             setValue(selectedOption ? selectedOption.value : undefined);
           }}

src/openforms/js/components/admin/form_design/registrations/zgw/mocks.js

@@ -65,6 +65,11 @@ const CASE_TYPES = {
       description: 'Draft case type',
       isPublished: false,
     },
+    {
+      identification: 'ZT23',
+      description: 'Published case type with a rather long description',
+      isPublished: true,
+    },
   ],
 };
 

src/openforms/scss/components/admin/_catalogi-type-option.scss

@@ -7,10 +7,5 @@
 
   @include bem.element('draft-suffix') {
     color: var(--body-quiet-color);
-
-    // only display the suffix in the dropdown
-    @at-root .admin-react-select__value-container & {
-      display: none;
-    }
   }
 }

src/openforms/scss/vendor/_react-select.scss

@@ -25,4 +25,5 @@
     100%,
     var(--of-admin-select-max-inline-size)
   );
+  max-inline-size: var(--of-admin-select-max-inline-size);
 }