Skip to content

Conversation

rothsandro
Copy link

@rothsandro rothsandro commented Oct 4, 2025

Closes #8339

Several components like Dialog and Select set data-pressed="true" on the trigger while the corresponding overlay is open, which is often not desired for styling. As outlined in the issue, a new property has been added to these components to prevent this behavior. The default value is true, so the behavior remains unchanged by default.

Naming: A few names for the property were suggested in the issue. I used isPressedWhenOpen on trigger components (DialogTrigger, MenuTrigger), and isTriggerPressedWhenOpen for other components to make it clear that the property affects the trigger.

I think it's easier to understand than consideredPressedWhenOpen. And persistPressStateWhenOpen doesn't feel right for me for components like Menu which open the overlay on press start and therefore never have data-pressed=true with the new behavior.

Storybook: I added a new control to the corresponding RAC stories which already used Story controls. Most of them don't and I didn't add a separate Story for it. If I should add them, let me know.

Spectrum: I also updated the S2 components, I hope that's okay.

  • The new property is omitted in the S2 props interfaces, I don't think it makes sense to set this from outside. This could be a breaking change on type-level in some edge cases, if someone expects the S2 DialogTriggerProps to fully extend the RAC DialogTriggerProps (which was the case before). Is that ok?
  • The workarounds to prevent stuck scale effects (isPressed={false}) are removed.
  • Some components have a custom implementation for pressed state (as the scale effect wouldn't be triggered otherwise). This is still necessary and not removed. I also added this workaround to the TabsPicker component.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

  1. Start Storybook yarn start
  2. Open the RAC Select Example
  3. Open the select
  4. Inspect the trigger button => data-pressed="true"
  5. Set the story control isTriggerPressedWhenOpen to false
  6. Inspect the trigger button => data-pressed is not set anymore

🧢 Your Project:

@rothsandro rothsandro changed the title feat: allow customazing behavior of pressed state feat: allow customizing behavior of pressed state Oct 4, 2025
@rothsandro rothsandro closed this Oct 4, 2025
@rothsandro rothsandro reopened this Oct 4, 2025
@snowystinger
Copy link
Member

Build of PR over here: #9065 for ease of testing

Copy link
Member

@snowystinger snowystinger left a comment

Choose a reason for hiding this comment

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

Thanks so much for starting this PR! and thank you so much for writing tests!

formValue = 'key',
allowsCustomValue
allowsCustomValue,
isTriggerPressedWhenOpen = true
Copy link
Member

Choose a reason for hiding this comment

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

generally we try to have booleans be negative by default so that you don't need to explicitly set false on it and omitting it is the same as setting false

this is a really hard one to name

isTriggerUpWhenOpen
isTriggerInactiveWhenOpen

Copy link
Author

Choose a reason for hiding this comment

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

I like isTriggerUpWhenOpen, or maybe as alternative suggestion isTriggerReleasedWhenOpen (but it's a bit long). But it's up to you to decide.

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.

Button remains in pressed state when opening a modal

2 participants