💄 [#4802] Remove unnessecery html elements from dom

The .catalogi-type-option span element is only needed for the dropdown menu, not when it is the selected value. So the element should only be added when it's used in the dropdown menu.
This also solves some styling issues when the content is beyond the max size of the ReactSelect

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/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/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;
-    }
   }
 }