fix: enable search in select editable by keeping label as string

The select editable rendered by pimcore_select with a store configuration
shows a search box (showSearch + optionFilterProp="label"), but typing
never narrows the options — every query returns zero matches.

Root cause: transformDocumentEditableStoreToOptions wraps every label in
<SanitizeHtml>, producing a React element. antd filters options by
String(option.label), so for a React element the comparison becomes
'[object Object]' and no user query ever matches.

Fix: keep label as a plain string so the built-in filter works; move
HTML sanitization to render time via a new renderSanitizedLabel helper,
exported alongside the transform and wired into the SelectEditable via
labelRender / optionRender. XSS protection is unchanged — the label is
still wrapped in <SanitizeHtml> at every point it becomes DOM.

The helper is exported (not defined locally in the component) so the
adjacent MultiSelectEditable, which shares the same transform, can
reuse it without duplication.

Author: daniel-travix

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 ?? '') } />
+)