Skip to content

feat(ui-text-input,ui-select): add forcePlaceholder prop to TextInput#2643

Open
HerrTopi wants to merge 1 commit into
masterfrom
text-placeholder
Open

feat(ui-text-input,ui-select): add forcePlaceholder prop to TextInput#2643
HerrTopi wants to merge 1 commit into
masterfrom
text-placeholder

Conversation

@HerrTopi

Copy link
Copy Markdown
Contributor

Summary

  • Add optional forcePlaceholder prop (default false) to TextInput v2 that renders the placeholder when empty regardless of interaction type
  • Pass forcePlaceholder to Select v2's trigger TextInput so a Select shows its placeholder outside the enabled interaction state

Test Plan

  • Render a TextInput in readonly/disabled interaction with forcePlaceholder and confirm the placeholder text shows while empty, and disappears once a value is entered
  • Verify a Select displays its placeholder when not in the enabled interaction state
  • RTL + a11y spot-check on both components

Fixes INSTUI-5104

🤖 Generated with Claude Code

Add an optional forcePlaceholder prop (default false) to TextInput v2 that always renders
the placeholder when the input is empty, regardless of the interaction type. Previously the
placeholder only showed when interaction was 'enabled'.

Wire the prop into Select v2's trigger TextInput so a Select can display its placeholder even
when it is not in the enabled interaction state.

Ref: INSTUI-5104

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@HerrTopi HerrTopi self-assigned this Jul 17, 2026
@github-actions

Copy link
Copy Markdown
Contributor
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://instructure.design/pr-preview/pr-2643/

Built to branch gh-pages at 2026-07-17 11:30 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

github-actions Bot pushed a commit that referenced this pull request Jul 17, 2026
@github-actions

Copy link
Copy Markdown
Contributor

Visual regression report

No changes.

Status Count
Unchanged 32
Changed 0
New 0
Removed 0

📊 View full report

Baselines come from the visual-baselines branch. They refresh on every merge to master.

@HerrTopi
HerrTopi requested a review from matyasf July 17, 2026 12:17
nextProps.selectOption.props.renderBeforeLabel &&
nextProps.selectOption.props.renderBeforeLabel &&
prevProps.selectOption.props.renderAfterLabel ===
nextProps.selectOption.props.renderAfterLabel &&

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The formatting was broken in this commit: cda547a#diff-86c34ad67bd876370225bf0df1e248d809d3ac768f41267d08d576d0ef2d0ec1

This is just a revert (and makes the whole thing a pain to read!)

@HerrTopi
HerrTopi requested a review from ToMESSKa July 22, 2026 10:22

@ToMESSKa ToMESSKa left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The forced placeholder text currently has no styling (any styling depends on it being interaction === 'enabled' in TextInput/v2/styles.ts). I think it has too low of a contrast in the dark theme, around 2.1:1.

I also see a comment in TextInput/v2/styles.ts which says "placeholder is not rendered in the readOnly and disabled state", which should be removed now.

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants