fix(FileField): open the file dialog inside a link row - #2965
Merged
Conversation
A list row with an href is a react-aria GridListItem link, and react-aria suppresses the default action of every click inside it — without a target or portal check. Opening the file dialog *is* the default action of FileInput's click on its hidden input, so the dialog stayed closed with no error. A modal rendered from such a row is affected too: portalling moves the DOM node, not the React tree React dispatches along. The hidden input's click is addressed to that input alone, so it now stops propagating. Fixes #2964 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
Coverage Report for ./packages/components/
File CoverageNo changed files found. |
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
mfal
approved these changes
Aug 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
A
FileField(andFileDropZone, which renders one) opens no file dialog when it sits in aListrow that has anhref— including in aModalrendered from that row. The button reacts, nothing happens, no error.Reported from mStudio (
coab-0x7e7/frontend/apps/mstudio#3835) for a certificate upload and two avatar uploads.Cause
A row with
hrefis a react-ariaGridListItemlink. react-aria attaches anonClickto such rows that kills the click's default action (useSelectableItem,linkBehaviordefaults to"action"inuseGridList) — and unlike itsonPointerDown/onMouseDownsiblings, it has no target or portal check.FileInputopens the dialog withinputRef.current?.click()on its hidden<input type="file">. Opening the dialog is that click's default action, so the row handler cancels it.Portalling does not help:
Overlaymoves the DOM node, but the content stays a React descendant of the row, and React dispatches along the React tree.Fix
onClick={(event) => event.stopPropagation()}on the hidden input. That click is addressed to this input alone — everything outside can only misread it. Fixes every occurrence at once, however deep the field sits in rows and modals.Test
FileField.browser.test.tsxrenders the field in aGridListItemwithhref, clicks the trigger and asserts the input's click is notdefaultPrevented. Red before the fix in both Firefox and WebKit, green after.Closes #2964
Checklist
fix:→ basemain)pnpm lintclean (0 errors, prettier clean),pnpm affected:testgreen, fullpnpm nx test:browser componentsgreen (72 files / 500 tests, Firefox + WebKit)FileInputis not@flr-generate, no prop, JSDoc or SCSS class change;git diffempty afterbuild:remote-componentsandbuild:scss-types