fix(select): support floating labels with slotted content by brandyscarney · Pull Request #31326 · ionic-team/ionic-framework

brandyscarney · 2026-08-04T21:19:53Z

Issue number: resolves #30402

What is the current behavior?

Selects with a floating label and a start or end slot always display the label in the floated state, regardless of whether the select contains a value:

without value	with value

What is the new behavior?

The floating label now behaves consistently regardless of whether start or end slots are present:
- It overlays the select when the field is empty.
- It floats when the select is expanded or contains a value.
- It displays the placeholder when it is focused or expanded but does not contain a value.
Updates the placeholder opacity when floating so it will use the correct value of --placeholder-opacity instead of 1, matching the other select label placements.
Start slot content is now always positioned to the left of both the label and the select.
Additional screenshot tests have been added to verify these behavior and layout changes.
A follow-up ticket has been created to address the remaining UI differences between our leading/trailing content implementation and the md specification.

Does this introduce a breaking change?

Yes
No

Internal DOM Structure Changes

The component's internal DOM structure has been restructured to support floating labels with slotted start and end content. Additionally, the structure of the component has been reorganized, with some elements now grouped differently than before. The inner wrapper element has been removed, and its content has been split across separate wrapper elements for the start slot, control, and end slot. This may introduce breaking changes for developers who rely on the component's internal DOM structure or apply custom styling to internal elements.

Developers who previously styled ion-select::part(inner) should migrate to targeting the updated component structure using the following CSS parts instead:

ion-select::part(start) - Target the start slot wrapper
ion-select::part(control) - Target the control wrapper containing the label and native select. When the label is not floating or stacked, this part also contains the dropdown icon.
ion-select::part(end) - Target the end slot wrapper. When the label is floating or stacked, this part also contains the dropdown icon.

Other information

Preview

vercel · 2026-08-04T21:20:00Z

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

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview	Aug 7, 2026 9:44pm

brandyscarney · 2026-08-05T18:19:57Z

I renamed these screenshots from select-slots to select-slot to match the folder name.

brandyscarney · 2026-08-05T18:20:12Z


 configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('select: start and end slots (visual checks)'), () => {
+  test.describe(title('select: slot'), () => {


This was updated to match the folder name, following how we title other tests.

brandyscarney · 2026-08-05T18:21:44Z

+    test('should not have visual regressions with a floating label when expanded', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30402',


I noticed this bug and fixed it while I was cleaning up the styles so I added a test for it here.

After updating all of the screenshots I found that this is technically covered by this one: https://github.com/ionic-team/ionic-framework/pull/31326/changes?#diff-5a03488c7650116b1b96323c5b1ec6fb3d652e44fd7c78d9a162a22076fcafe2

I could remove this test if desired and add the issue number on that test.

brandyscarney · 2026-08-05T18:21:59Z

+        test('should not have visual regressions with a floating label when expanded', async ({ page }) => {
+          test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/ionic-team/ionic-framework/issues/30402',


I noticed this bug and fixed it while I was cleaning up the styles so I added a test for it here.

brandyscarney · 2026-08-05T21:22:18Z

      }
+
+      /* Hide the backdrop for action sheets */
+      ion-action-sheet.select-action-sheet ion-backdrop {


I changed all of the selects here to use an action sheet with a clear backdrop so that you could see the states better when interacting with them.

… changed

ShaneK

Looking really great! I noticed a few issues and a few nits, hopefully I explained things well enough that it's not too bad to fix up!

ShaneK · 2026-08-07T18:48:53Z

+    const target = ev.target as HTMLElement;
+    const nativeWrapper = this.el.shadowRoot?.querySelector('.native-wrapper');
+
+    if (!nativeWrapper?.contains(target)) {


Clicking a slotted ion-button still fires its own handler, but a listener on document gets nothing. On major-9.0 both fire once.

Slotted nodes are never inside .native-wrapper, so they always take the stopPropagation() branch. That's the case onClick avoids stopping, so React's onClick on slotted content stops working.

Input fix: 9b59417

Textarea fix: 58708ca

Select fix: b5a1d65

ShaneK · 2026-08-07T18:51:59Z

-      await expect(select).not.toHaveClass(/select-expanded/);
+      await expect(select).toHaveScreenshot(screenshot(`select-slot-label-floating-value`));
+    });
+  });


Could should not open select when slotted buttons are clicked come back? It's the only coverage for onLabelClick, and this PR rewrites that handler.

ShaneK · 2026-08-07T18:54:02Z

+    const isRTL = document.dir === 'rtl';
+    const sign = isRTL ? '' : '-';


Suggested change

const isRTL = document.dir === 'rtl';

const sign = isRTL ? '' : '-';

const sign = isRTL(this.el) ? '' : '-';

Using document.dir here misses a dir set on the host. With dir="rtl" on the select in an LTR page it renders RTL but the offset comes out -48px instead of 48px, so the label lands about 96px off its notch.

ShaneK · 2026-08-07T18:57:58Z

+      return '';
+    }
+
+    const startSlotWidth = startSlot.getBoundingClientRect().width;


The offset only refreshes when the slot mutation fires, so a start slot that changes size without a DOM change keeps the old value. Widening slotted content with CSS leaves the real width at 176px and the offset still at -36.4px, which leaves the label mid-field.

A ResizeObserver on .select-start would cover it. Might be worth a short doc comment on this method too, it's doing a bit more than the name suggests.

ShaneK · 2026-08-07T19:01:59Z

+       */
+      this.skipLabelTransition = true;
+
+      requestAnimationFrame(() => {


This isn't cancelled on disconnect, so it can set state after the component is gone. Storing the handle and clearing it next to the slot controller would fix it.

Input fix: 3fcf658

Textarea fix: 6278723

Select fix: 9a7b423

ShaneK · 2026-08-07T19:11:06Z


 configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('select: start and end slots (visual checks)'), () => {
+  test.describe(title('select: slot'), () => {


The new screenshots cover start and floating but not stacked, which goes through the same restructure. Worth adding here, or a follow-up card if you'd rather keep this one tight.

…llback

Co-authored-by: Shane <shane.king@outsystems.com>

chore(): remove old snapshots

f7b1a82

github-actions Bot added the package: core @ionic/core package label Aug 4, 2026

vercel Bot deployed to Preview August 4, 2026 21:25 View deployment

brandyscarney added 2 commits August 4, 2026 17:32

fix(select): support floating labels with slotted content

5821084

style: lint

8a3df75

vercel Bot deployed to Preview August 4, 2026 21:40 View deployment

vercel Bot deployed to Preview August 4, 2026 21:46 View deployment

brandyscarney added 2 commits August 5, 2026 11:45

refactor(select): remove inner part, add parts for new wrapper divs

108222a

chore: build

5a47f9f

vercel Bot deployed to Preview August 5, 2026 15:53 View deployment

copy editing

939b029

vercel Bot deployed to Preview August 5, 2026 16:28 View deployment

brandyscarney added 2 commits August 5, 2026 13:37

test(select): rename tests and add fill and rtl coverage

657ba03

chore(): add updated snapshots

9fdfc74

vercel Bot deployed to Preview August 5, 2026 18:06 View deployment

fix(select): prevent the label click from propagating

d5ecc50

vercel Bot deployed to Preview August 5, 2026 18:19 View deployment

brandyscarney commented Aug 5, 2026

View reviewed changes

test(select): update to verify new parts can be customized

4459f48

vercel Bot deployed to Preview August 5, 2026 18:44 View deployment

chore(): add updated snapshots

7a6f3ef

vercel Bot deployed to Preview August 5, 2026 18:56 View deployment

brandyscarney added 2 commits August 5, 2026 15:11

chore: remove unrelated snapshot change

feafbf2

fix(select): properly group icon with the native select for justify

ecbe120

vercel Bot deployed to Preview August 5, 2026 20:01 View deployment

chore(): add updated snapshots

531ff9b

brandyscarney added 2 commits August 5, 2026 17:08

Merge branch 'major-9.0' into FW-6471-select

b21f895

chore(): add updated snapshots

8610c19

brandyscarney commented Aug 5, 2026

View reviewed changes

vercel Bot deployed to Preview August 5, 2026 21:24 View deployment

style: remove extra function call

a27ba41

vercel Bot deployed to Preview August 5, 2026 21:30 View deployment

chore(): add updated snapshots

be5fdbb

vercel Bot deployed to Preview August 5, 2026 21:48 View deployment

chore(): add updated snapshots

e9d9c26

vercel Bot deployed to Preview August 6, 2026 14:02 View deployment

chore(): add updated snapshots

4575687

vercel Bot deployed to Preview August 6, 2026 15:14 View deployment

fix(select): disable the label transition when start or end slots are…

d106957

… changed

vercel Bot deployed to Preview August 6, 2026 19:42 View deployment

brandyscarney mentioned this pull request Aug 6, 2026

docs(updating): update v9 migration guide to add missing breaking changes ionic-team/ionic-docs#4620

Open

trigger actions after outage

3205851

vercel Bot deployed to Preview August 7, 2026 13:53 View deployment

brandyscarney marked this pull request as ready for review August 7, 2026 14:35

brandyscarney requested a review from a team as a code owner August 7, 2026 14:35

brandyscarney requested a review from thetaPC August 7, 2026 14:35

ShaneK requested changes Aug 7, 2026

View reviewed changes

fix(select): allow click propagation for slotted content

b5a1d65

vercel Bot deployed to Preview August 7, 2026 20:41 View deployment

brandyscarney and others added 4 commits August 7, 2026 17:15

refactor(select): mark slot var as internal and add fallback

ffe8326

refactor(select): call raf from utils and cancel it in disconnectedCa…

9a7b423

…llback

Update core/src/components/select/select.scss

ed00d80

Co-authored-by: Shane <shane.king@outsystems.com>

Update core/src/components/select/select.scss

3b31ce8

Co-authored-by: Shane <shane.king@outsystems.com>

vercel Bot deployed to Preview August 7, 2026 21:27 View deployment

test: rename solid id to outline

898363a

vercel Bot deployed to Preview August 7, 2026 21:44 View deployment

		const isRTL = document.dir === 'rtl';
		const sign = isRTL ? '' : '-';

	const isRTL = document.dir === 'rtl';
	const sign = isRTL ? '' : '-';
	const sign = isRTL(this.el) ? '' : '-';

Uh oh!

Conversation

brandyscarney commented Aug 4, 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 Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandyscarney Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandyscarney Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

brandyscarney commented Aug 4, 2026 •

edited

Loading

vercel Bot commented Aug 4, 2026 •

edited

Loading

brandyscarney Aug 5, 2026 •

edited

Loading

brandyscarney Aug 7, 2026 •

edited

Loading