feat(select): add labelPlacement prop, justify prop, and rich content for select options by thetaPC · Pull Request #31241 · ionic-team/ionic-framework

thetaPC · 2026-06-23T21:14:01Z

Issue number: resolves #29890

What is the current behavior?

Select only allows plain text to be passed within it's options.

What is the new behavior?

ion-select-option

Added default slot support for custom HTML content (images, avatars, icons, etc.) when innerHTMLTemplatesEnabled is true
Added start and end named slots for content that appears in the overlay interface but not in the selected text
Added description prop for text rendered below the option label in the overlay
Add labelPlacement and justify props to ion-select-option and pass them through to alert, popover, and modal overlay paths
Add per-theme slot-size limitations so oversized slotted content is capped to keep option rows visually uniform within an overlay

ion-select

Selected text renders HTML content from the default slot, excluding start/end slot content
aria-label derives plain text only from the default slot, ensuring screen readers don't read slotted or element content
Added CSS variables for styling media within the selected text (--select-text-media-width, --select-text-media-height, etc.)

Overlay interfaces (alert, action-sheet, select-popover, select-modal)

All four interfaces render rich content (start, end, description, HTML label) consistently via the shared renderOptionLabel utility
Public interfaces (ActionSheetButton, AlertInput, SelectPopoverOption, SelectModalOption) are unchanged — rich content fields are on internal extended interfaces (SelectActionSheetButton, SelectAlertInput, SelectOverlayOption)
Content is sanitized via sanitizeDOMString before DOM injection to prevent XSS

Utilities

Added select-option-render.tsx: shared render utility for option labels across all overlay components
Added getOptionContent: extracts and clones slot content from ion-select-option for overlays and selected text
Added getDefaultSlotPlainText — extracts plain text from the default slot, used for labels and aria
Add reflectPropertiesToAttributes to core/src/utils/sanitization/ and call it from getOptionContent immediately before cloneNode. The helper mirrors a registered set of custom-element DOM properties (icon, name, src, ios, md on ion-icon) onto attributes so the cloned overlay copy renders correctly regardless of how the framework bound the prop.

Tests

Added E2E tests for rich content rendering across all four interfaces (single and multiple selection)
Added tests for slot positioning (start/end placement verification)
Added tests for selected text content verification (excludes slotted content)

Does this introduce a breaking change?

Yes
No

No, developers will be able to continue using plain text for select options as usual.

Other information

Dev build: 8.8.12-dev.11782342444.186b6e9c

Preview

… for select options

vercel · 2026-06-23T21:14:06Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Jun 25, 2026 6:23pm

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

ShaneK

Looking really good! Fairly minor change requests with one intention verification request

ShaneK · 2026-06-25T17:03:10Z

+ * form/navigation-hijack attributes (`formaction`, `action`, `target`),
+ * which are therefore stripped.
+ */
+const allowedAttributes = [


This allowedAttributes array is shared with sanitizeDOMString, so growing it from 6 entries to ~70 (plus aria-*/data-* wholesale) changes the sanitization output for every existing consumer, not just the new select path. ion-toast, ion-loading, the ion-alert message, ion-refresher-content, and ion-infinite-scroll-content all run innerHTML through this when innerHTMLTemplatesEnabled is on, so names like type, value, width, height, mode, and theme now survive where they were stripped before. The dangerous-vector handling is actually tighter than before so I don't think this is unsafe, but is the wider allowlist intended for those other components too? Worth a regression test covering one of them, and a line in the PR description so anyone bisecting a future toast/loading rendering difference knows where to look.

ShaneK · 2026-06-25T17:05:58Z

+  const Tag = useSpan ? 'span' : 'div';
+  const keyPrefix = `${className}-${id}`;
+
+  sanitizeDOMTree(content);


renderClonedContent calls sanitizeDOMTree(content) here, and the new "should sanitize an HTMLElement label that bypassed ion-select" spec shows this is the only sanitization pass for vanilla-JS callers that hand an HTMLElement straight to renderOptionLabel without going through getOptionContent. But the cloneToVNode comment just above says "pure structural conversion, no security filtering" and "Highly recommended to pre-sanitize the source DOM", which reads like sanitization always happens upstream. Someone could delete this call as redundant and reopen an XSS hole on the direct-HTMLElement path. Could you add a short note above it explaining that this is the only sanitize pass for direct HTMLElement callers and shouldn't be removed?

ShaneK · 2026-06-25T17:08:52Z

@@ -23,6 +30,43 @@ export class SelectOption implements ComponentInterface {
   */
  @Prop() value?: any | null;


The disabled JSDoc just above (This property does not apply when interface="action-sheet" as ion-action-sheet does not allow for disabled buttons.) is now stale. This PR wires option.disabled through to the action-sheet button: createActionSheetButtons sets it, the button renders disabled={b.disabled}, there's new disabled styling in action-sheet.scss, and an e2e test covers it. The comment says the opposite of what ships now. Can you update it?

…eDOMTree

…emoved

ShaneK

LGTM! Great work 🚀

Issue number: resolves ionic-team#31381 ---------   ## What is the current behavior?  `ion-select` derives the text it displays for the selected option, and that option's contribution to the button's `aria-label`, from the option's child nodes. In v9 that derivation is wrong whenever an option has more than one child node, or has its text wrapped in an element. | `ion-select-option` content | browser renders | v8 | v9 | | --- | --- | --- | --- | | `Star` | `Star` | `Star` | `Star` | | two sibling text nodes, `{'★'}{'Star'}` | `★Star` | `★Star` | `★ Star` | | `A Star` | `A Star` | `A Star` | `A` | | `Star` | `Star` | `Star` | *(empty)* | Two distinct defects: 1. **A space is inserted between adjacent text nodes.** Every framework renders `{icon}{label}` as two sibling text nodes with no whitespace between them, so any option with an emoji, flag, or icon prefix gains a space that is not in the DOM. 2. **Text wrapped in an element is dropped entirely.** An option whose content is `Star`, `Star`, or an i18n component's wrapper element renders as an **empty select** with an empty accessible name, silently. This is the more damaging of the two. Both affect the visible selected text and the `aria-label`, and both propagate to every overlay interface — `createAlertInputs`, `createActionSheetButtons`, and `createOverlaySelectOptions` read the option through the same helper. In the linked reproduction, opening the first select shows an alert radio labelled `★ Star`. There is no error or warning; the text is just wrong. ## What is the new behavior?  The selected text and `aria-label` should match what the browser renders for the option's content, which is what v8 produced via `textContent`: `★Star` for two adjacent text nodes, and `A Star` for `A Star`. - - - ## Does this introduce a breaking change? - [ ] Yes - [X] No (It fixes an unreported breaking change made in ionic-team#31241)  ## Other information  --------- Co-authored-by: Shane <shane@shanessite.net>

feat(select): add labelPlacement prop, justify prop, and rich content…

84c74ad

… for select options

github-actions Bot added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Jun 23, 2026

vercel Bot deployed to Preview June 23, 2026 21:18 View deployment

thetaPC added 2 commits June 23, 2026 16:01

chore(): run lint

b762e0b

chore(): run build

6cfba29

vercel Bot deployed to Preview June 23, 2026 23:10 View deployment

feat(select): more functionality and styles

95a5585

vercel Bot deployed to Preview June 24, 2026 17:59 View deployment

thetaPC changed the title ~~feat(select): add labelPlacement prop, justify prop, and rich content…~~ feat(select): add labelPlacement prop, justify prop, and rich content for select options Jun 24, 2026

test(many): add snapshots

0e289c0

vercel Bot deployed to Preview June 24, 2026 18:29 View deployment

chore(): revert generated react components.ts

694d86d

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions Bot removed the package: react @ionic/react package label Jun 24, 2026

vercel Bot deployed to Preview June 24, 2026 20:26 View deployment

test(select): update snapshots

f3ade82

vercel Bot deployed to Preview June 24, 2026 21:27 View deployment

test(alert): update snapshots

86b6e9c

vercel Bot deployed to Preview June 24, 2026 22:04 View deployment

thetaPC marked this pull request as ready for review June 24, 2026 23:15

thetaPC requested a review from a team as a code owner June 24, 2026 23:15

thetaPC requested review from ShaneK and gnbm and removed request for gnbm June 24, 2026 23:15

ShaneK requested changes Jun 25, 2026

View reviewed changes

thetaPC added 2 commits June 25, 2026 11:10

fix(sanitization): scope the broadened attribute allowlist to sanitiz…

7f7d867

…eDOMTree

docs(select): note the direct HTMLElement sanitize pass must not be r…

0426878

…emoved

docs(select): fix stale disabled JSDoc on select-option

f4d45a0

vercel Bot deployed to Preview June 25, 2026 18:23 View deployment

thetaPC requested a review from ShaneK June 25, 2026 20:07

ShaneK approved these changes Jun 25, 2026

View reviewed changes

thetaPC merged commit a35e13d into major-9.0 Jun 25, 2026
50 checks passed

thetaPC deleted the FW-7599 branch June 25, 2026 21:08

thetaPC mentioned this pull request Jun 25, 2026

fix(sanitization): scope allowlist to the rich content path #31245

Merged

2 tasks

This was referenced Aug 20, 2026

bug: ion-select shows the wrong text for an option with multiple child nodes #31381

Closed

fix(select): derive option text from all child nodes #31382

Merged

Navigation Menu

Uh oh!

feat(select): add labelPlacement prop, justify prop, and rich content for select options - #31241

feat(select): add labelPlacement prop, justify prop, and rich content for select options#31241
thetaPC merged 11 commits into
major-9.0from
FW-7599

thetaPC commented Jun 23, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jun 23, 2026 •

edited

Loading

Uh oh!

ShaneK left a comment

Uh oh!

ShaneK Jun 25, 2026

Uh oh!

thetaPC Jun 25, 2026

Uh oh!

ShaneK Jun 25, 2026

Uh oh!

thetaPC Jun 25, 2026

Uh oh!

ShaneK Jun 25, 2026

Uh oh!

thetaPC Jun 25, 2026

Uh oh!

ShaneK left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -23,6 +30,43 @@ export class SelectOption implements ComponentInterface {
		*/
		@Prop() value?: any \| null;

Uh oh!

Conversation

thetaPC commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

ShaneK Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

thetaPC Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

ShaneK Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

thetaPC Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

ShaneK Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

thetaPC Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

thetaPC commented Jun 23, 2026 •

edited

Loading

vercel Bot commented Jun 23, 2026 •

edited

Loading