Skip to content

Rotate dropdown caret when opening SelectInput#301

Merged
devmount merged 2 commits into
mainfrom
enhancements/225-turn-arrow-on-open-select-input
Jun 30, 2026
Merged

Rotate dropdown caret when opening SelectInput#301
devmount merged 2 commits into
mainfrom
enhancements/225-turn-arrow-on-open-select-input

Conversation

@devmount

@devmount devmount commented Jun 30, 2026

Copy link
Copy Markdown
Collaborator

What changed?

This change fixes a UI inconsistency so that the dropdown caret now rotates and points upwards when the SelectInput component is opened.

Why?

Visual state indication.

Limitations and Notes

This relies on the :open CSS pseudo-class, which recently got baseline support. I didn't find a good approach to test this, so I skipped adding a test for now.

Applicable Issues

Closes #225

Screenshots

services-ui_select-input_caret_rotation.mp4

@devmount devmount self-assigned this Jun 30, 2026

@rwood-moz rwood-moz 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.

Pulled branch and tried out SelectInput element in the storybook, verified rotating dropdown caret. Nice!

@devmount

Copy link
Copy Markdown
Collaborator Author

@rwood-moz Awesome, thanks for testing! 🙇🏻

@devmount devmount merged commit 9e77ca6 into main Jun 30, 2026
3 checks passed
@devmount devmount deleted the enhancements/225-turn-arrow-on-open-select-input branch June 30, 2026 13:52
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.

SelectInput should show an arrow up instead of down when opened

2 participants