Skip to content

fix: handle fragments in dialog actions - #5008

Closed
vivekjm wants to merge 1 commit into
callstack:mainfrom
vivekjm:fix-dialog-actions-fragment
Closed

vivekjm wants to merge 1 commit into
callstack:mainfrom
vivekjm:fix-dialog-actions-fragment

Conversation

@vivekjm

@vivekjm vivekjm commented Jun 20, 2026

Copy link
Copy Markdown

Motivation

Dialog.Actions clones each action child to inject compact, uppercase, and spacing props. When callers wrap actions in a fragment, React 19 warns because those props are applied to React.Fragment, which only accepts key and children.

This treats top-level fragments as transparent wrappers so their children still receive the dialog action props, while the fragment itself is not cloned.

Related issue

Fixes #4794

Test plan

  • yarn test src/components/__tests__/Dialog.test.tsx --runInBand
  • yarn typescript
  • yarn lint-no-fix src/components/Dialog/DialogActions.tsx src/components/__tests__/Dialog.test.tsx (passes with an existing unrelated warning in src/components/__tests__/TextInput.test.tsx)

I also let the pre-commit hook run once. It ran lint, TypeScript, and the full Jest suite; the full suite failed in this sparse/source checkout because src/babel/__tests__/index.js expects lib/mappings.json, which is not present without generating/building lib. The touched Dialog test passed in that run.

@Doberjohn

Copy link
Copy Markdown
Collaborator

On main (6.x) this is already fixed another way: #5076 changed Dialog.Actions so it no longer clones its children, and each Button inside it now takes mode and compact itself. So this change isn't needed on main, and I'm closing it. #4794 stays open, because the 5.0 branch still clones the children, so 5.x apps still see the warning. A fix for that against the 5.0 branch would be welcome.

@Doberjohn Doberjohn closed this Oct 29, 2026
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.

Dialog.Actions spreads compact prop into Fragment in React Native 0.81 / React 19, causing error when dismissing Dialog

2 participants