[Documents] Enable search in document select/multiselect editables by keeping label as string (#3357)

Author: daniel-travix

assets/js/src/core/modules/element/dynamic-types/definitions/document/editable/components/multiselect-editable/multiselect-editable.tsx

@@ -13,6 +13,7 @@ import { Select } from '@sdk/components'
 import { InheritanceOverlay } from '../inheritance-overlay/inheritance-overlay'
 import { toCssDimension } from '@sdk/utils'
 import { type SelectOptionType } from '@sdk/modules/element'
+import { renderSanitizedLabel } from '../../utils/select-options'
 import { useFieldWidth } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/providers/field-width/use-field-width'
 
 interface MultiSelectEditableProps {
@@ -54,9 +55,11 @@ export const MultiSelectEditable = ({
       <Select
         className={ className }
         disabled={ inherited }
+        labelRender={ ({ label }) => renderSanitizedLabel(label) }
         mode="multiple"
         onChange={ onChange }
         optionFilterProp="label"
+        optionRender={ (option) => renderSanitizedLabel(option.label) }
         options={ options }
         popupMatchSelectWidth={ false }
         style={ containerStyle }

assets/js/src/core/modules/element/dynamic-types/definitions/document/editable/components/select-editable/select-editable.tsx

@@ -13,6 +13,7 @@ import { CreatableSelect } from '@sdk/components'
 import { InheritanceOverlay } from '../inheritance-overlay/inheritance-overlay'
 import { toCssDimension } from '@sdk/utils'
 import { type SelectOptionType } from '@sdk/modules/element'
+import { renderSanitizedLabel } from '../../utils/select-options'
 import { useFieldWidth } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/providers/field-width/use-field-width'
 
 interface SelectEditableProps {
@@ -59,8 +60,10 @@ export const SelectEditable = ({
         className={ className }
         creatable={ editable }
         disabled={ inherited }
+        labelRender={ ({ label }) => renderSanitizedLabel(label) }
         onChange={ onChange }
         optionFilterProp="label"
+        optionRender={ (option) => renderSanitizedLabel(option.label) }
         options={ options }
         popupClassName={ className }
         popupMatchSelectWidth={ false }

assets/js/src/core/modules/element/dynamic-types/definitions/document/editable/utils/select-options.tsx

@@ -16,7 +16,12 @@ import { SanitizeHtml } from '@Pimcore/components/sanitize-html/sanitize-html'
 export type DocumentEditableStoreEntry = [string | number | null, string] | string | number
 
 /**
- * Transforms document editable store entries into SelectOptionType array with sanitized HTML labels
+ * Transforms document editable store entries into SelectOptionType array.
+ *
+ * The `label` is returned as a plain string so that antd's built-in search
+ * (driven by `optionFilterProp="label"`) can match against it. HTML sanitization
+ * happens at render time via `renderSanitizedLabel`, used by the consuming
+ * components in their `optionRender` / `labelRender` props.
  */
 export const transformDocumentEditableStoreToOptions = (
   store?: DocumentEditableStoreEntry[]
@@ -27,15 +32,25 @@ export const transformDocumentEditableStoreToOptions = (
 
       return {
         value: String(value),
-        label: <SanitizeHtml html={ label } />
+        label: String(label)
       }
     } else {
       const stringValue = String(item)
 
       return {
         value: stringValue,
-        label: <SanitizeHtml html={ stringValue } />
+        label: stringValue
       }
     }
   }) ?? []
 }
+
+/**
+ * Renders a label with HTML sanitization. Intended for use in antd's
+ * `labelRender` / `optionRender` props, so that sanitization happens at the
+ * moment the label becomes DOM — while `label` itself stays a plain string
+ * so antd's built-in filter keeps working.
+ */
+export const renderSanitizedLabel = (label: React.ReactNode): React.JSX.Element => (
+  <SanitizeHtml html={ typeof label === 'string' ? label : String(label ?? '') } />
+)