fix: enable search in document select/multiselect editables by keeping label as string

[daniel-travix]

Problem

pimcore_select and pimcore_multiselect render antd Select / CreatableSelect with showSearch + optionFilterProp="label", but typing into the dropdown never narrows the options - every query returns zero matches.

{{ pimcore_select('pick', {
    'store': [['a', 'Apple'], ['b', 'Banana'], ['c', 'Cherry']]
}) }}

Open in the document editor, click the dropdown, type any character: list becomes empty.

Scope: document editables only (SelectEditable, MultiSelectEditable). DataObject selects and grid cell selects are unaffected - they already keep the label as a string when there is no HTML.

Root cause

transformDocumentEditableStoreToOptions wraps every label in <SanitizeHtml>:

return {
  value: String(value),
  label: <SanitizeHtml html={ label } />   // React element, not string
}

antd filters via String(option.label).toLowerCase().includes(input). For a React element that is "[object Object]", so nothing ever matches. The transform is shared by both editables, so both are broken.

Regression from #2031 (merged 2025-09-08), which introduced <SanitizeHtml> inside the transform. No existing issue found.

Fix

Keep label as a plain string, move sanitization to render time via a shared renderSanitizedLabel helper, wire it into both consumers' labelRender / optionRender. Helper lives in utils/select-options.tsx next to the transform, so there is one place for XSS logic.

Applying render props to both editables is required: changing the transform alone would silently drop XSS protection from the multiselect, which used to rely on <SanitizeHtml> being embedded in the label.

Diff (trimmed)

utils/select-options.tsx:

-      label: <SanitizeHtml html={ label } />
+      label: String(label)

+export const renderSanitizedLabel = (label: React.ReactNode): React.JSX.Element => (
+  <SanitizeHtml html={ typeof label === 'string' ? label : String(label ?? '') } />
+)

select-editable.tsx and multiselect-editable.tsx:

+import { renderSanitizedLabel } from '../../utils/select-options'

+        labelRender={ ({ label }) => renderSanitizedLabel(label) }
         optionFilterProp="label"
+        optionRender={ (option) => renderSanitizedLabel(option.label) }

Screenshots

Test brick with four pimcore_select / pimcore_multiselect instances, typing fr in the multiselect:

Before:

After:

Testing

Covered both transform branches (array-of-pairs and plain list) for both editables:

• pimcore_select with [['at','Austria'], ...] and with ['Apple','Banana',...]
• pimcore_multiselect with [['at','Austria'], ...] and with ['Apple','Banana',...]

Before: all four return 0 hits on any input. After: all four filter correctly.

XSS check with store: [['xss', '<b>X</b><script>alert(1)</script>']]: <b> renders bold, <script> dropped from DOM, no alert. Works for both editables.

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[daniel-travix]

I have read the CLA Document and I hereby sign the CLA

[markus-moser]

Hi,
thanks for your fix. Could you please rebase it to our bugfix branch (2025.4)? Also created a CONTRIBUTING.md in this PR to clarify the branch for future PRs (#3361).

Thanks a lot!

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[daniel-travix]

Thanks @markus-moser! I hadn't noticed you already changed the base branch to 2025.4 yourself - my last force-pushes were me trying to clean up the local branch and re-target 2025.4 (hence the extra pipeline runs). All good now from my end, ready when you are.

[markus-moser]

@daniel-travix Yes, looks good now - thanks a lot. Will check it and then merge it if everything is fine!