Repository navigation
[Dropzone] Expose the state with data-state and toggle the parts with hidden instead of inline styles - #4145
Merged
Merged
Conversation
ker0x
changed the title
data-state and toggle the parts with hidden instead of inline styles
Contributor
📊 Packages dist files size differenceThanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR.
|
|||||||||||||||
ker0x
force-pushed
the
feat/dropzone-data-state
branch
4 times, most recently
from
October 26, 2026 12:19
19d0150 to
a21e141
Compare
ker0x
added a commit
to ker0x/symfony-ux
that referenced
this pull request
Oct 26, 2026
| Q | A | -------------- | --- | Bug fix? | no | New feature? | yes | Deprecations? | no | Documentation? | yes | Issues | Fix symfony#4142 | License | MIT Sixth and last step of the RFC in symfony#4142. Based on symfony#4143, symfony#4145, symfony#4144, symfony#4146, symfony#4148 and symfony#4149, replayed in that order: only the last commit belongs to this PR. The two modes of the controller had grown into two code paths. Single-file mode showed one file with the preview of the form theme, cleared the input when the controller connected, and dispatched `dropzone:clear`; `multiple` mode kept a list, re-added the files already in the input on connect, and never dispatched `dropzone:clear`. Each feature of the RFC had to be written twice, and the modes differed in ways nobody chose: a prevented or rejected selection emptied the drop zone in single-file mode but kept the files in `multiple` mode, and the preview template only worked in `multiple` mode. Single-file mode is now the stored list of files capped at one, and both modes go through the same steps for each selection: the input is put back to the stored files right away (also while `dropzone:pre-add` listeners are processing), the dropped files are checked against `accept`, the `dropzone:pre-add` listeners run, then the files are added (single-file mode: the new file replaces the previous one, and the files over the first one are rejected with `max_files`), the input is updated, the preview is rendered and `dropzone:change` is dispatched. | Case | Before | After | ------------------------------------------------- | ---------------------------------------------- | --- | Single-file mode, controller connects with a file | input emptied, `dropzone:clear` | file kept and shown | `multiple` mode, last file removed | no `dropzone:clear` | `dropzone:clear` | Form reset | drop zone keeps showing the files | cleared, `dropzone:clear` | Single-file mode, selection prevented by a `dropzone:pre-add` listener | drop zone emptied | previous file kept, as in `multiple` mode | Single-file mode, preview template | not used | rendered in the preview, its remove slot clears | `multiple` mode, selection of files already in the list | `dropzone:change` | no event | Drag of text or a link over the drop zone | `dragging` | ignored | Drag over a child of the drop zone in Safari | `dragging` ends (`relatedTarget` is `null`) | `dragging` kept | Image previews | read again on every render, an outdated read can show the image of a replaced file | read once per file, never shown for another file `dropzone:change` keeps its payload (a `File` in single-file mode, a `FileList` in `multiple` mode), to stay compatible: changing it is left for 4.0. The form theme now renders the `dropzone_preview_item_template` block and the `remove_label` value in both modes. The drag state keeps the elements a drag has entered, from `dragenter` and `dragleave`, instead of reading `relatedTarget`, which WebKit does not set, and forgets the elements removed during the drag. `onMultipleChange()` is merged into `onInputChange()`. `src/Dropzone/UPGRADE.md` explains the changes for code listening to `dropzone:clear` on connect or to `dropzone:change`, and for controllers that extend this one. Tests: unit tests for a file kept on connect without `dropzone:clear`, a prevented selection and a pending one in single-file mode, a selection of several files in single-file mode, an outdated image read, a form reset, a prevented form reset, a disconnect during a form reset, the clear button after a failed connect, the preview template in single-file mode, `dropzone:clear` after the last removal in `multiple` mode, a selection that adds no file in `multiple` mode, one read per image, an image read again after a failed read, a drag without files, a drag over a child without `relatedTarget`, and a drag over an element removed during the drag; PHPUnit tests for the template block and the `remove_label` value in single-file mode; Playwright tests for a form reset and the last removal in `multiple` mode. The new tests fail on the base of this PR. Two tests of the base changed: the single-file mode `file chosen` test now picks the file with a writable `files` property like the other tests, as `@testing-library/user-event` makes it read-only while the controller now writes the input on every selection; and the test of a prevented selection after a pending one now expects the previous file to be kept.
…th `hidden` instead of inline styles | Q | A | -------------- | --- | Bug fix? | no | New feature? | yes | Deprecations? | no | Documentation? | yes | Issues | symfony#4142 | License | MIT Third step of the RFC in symfony#4142. Based on symfony#4143, which adds the `processing` state: only the last commit belongs to this PR. The controller shows and hides the input, the placeholder and the preview with `element.style.display`, and the form theme renders `style="display: none"`. Inline styles win over the utility classes an app sets (`flex`, `grid`, `hidden`), the `style` attributes need `style-src 'unsafe-inline'` under a CSP, and an app has no way to style the drop zone while files are dragged over it. The controller now uses the `hidden` attribute on these parts, and the container gets a `data-state` attribute: `empty`, `filled`, `dragging` or `processing` (the last one wins). The theme renders `hidden` instead of `style="display: none"`, and the bundle stylesheet adds `.dropzone-container [hidden] { display: none !important; }`, so the default look does not change. `!important` keeps a part hidden when an app rule with the same specificity, loaded later, sets `display` on it, as the inline style did. The `dragging` state is also set in `multiple` mode. In single mode, the visible parts are now computed from two flags (a file is shown, files are dragged over) instead of being set by each event handler. This replaces the deferred check in `onDrop()` for Chrome, which fires no `change` when the very same file is dropped again: the drop now only ends the drag, one tick later, so the input stays shown until the browser has put the dropped files into it. A controller that reconnects also ends a drag it missed the end of. It also fixes a drag that leaves an empty drop zone, which used to hide the placeholder and show an empty preview. | Case | Before | After | ------------------------------------------- | ---------------------------------------- | --- | Visibility of the parts | inline `style.display` | `hidden` attribute | State of the container | none | `data-state` | Drag leaving an empty drop zone | placeholder hidden, empty preview shown | placeholder shown | Theme copied with `style="display: none"` | works | works: the controller removes that inline style on connect | Default stylesheet disabled, own `display` rule on these parts | parts hidden | parts stay visible until the app adds the `[hidden]` rule (see `UPGRADE.md`) The last row is the behavior change: a rule of the app's own CSS that sets `display` on these classes wins over the browser's `[hidden]` style. The new `src/Dropzone/UPGRADE.md` explains what to add, and what to change in a theme that overrides `dropzone_widget`. Tests: unit tests for each state and the visibility in both modes, the image preview, a drag leaving an empty or a filled drop zone, the same file dropped again, the input staying shown while the drop is dispatched, a reconnect during a drag, and a theme with inline styles. Playwright tests for the states and the visibility through the e2e app, and one that loads only the bundle stylesheet, next to an app rule that sets `display` on the parts: the e2e app loads Bootstrap, whose `[hidden] { display: none !important }` would hide the parts even without the bundle rule. All of them pass on Chrome lowest, Chrome latest and Firefox latest, and the new ones fail on symfony#4143.
Kocal
added
Dropzone
Feature
Kocal
force-pushed
the
feat/dropzone-data-state
branch
from
November 2, 2026 18:23
a21e141 to
40c37f0
Compare
Kocal
approved these changes
Nov 2, 2026
carsonbot
added
Status: Reviewed
Kocal
approved these changes
Nov 2, 2026
Member
|
Thank you @ker0x. |
Kocal
pushed a commit
to ker0x/symfony-ux
that referenced
this pull request
Nov 2, 2026
| Q | A | -------------- | --- | Bug fix? | no | New feature? | yes | Deprecations? | no | Documentation? | yes | Issues | Fix symfony#4142 | License | MIT Sixth and last step of the RFC in symfony#4142. Based on symfony#4143, symfony#4145, symfony#4144, symfony#4146, symfony#4148 and symfony#4149, replayed in that order: only the last commit belongs to this PR. The two modes of the controller had grown into two code paths. Single-file mode showed one file with the preview of the form theme, cleared the input when the controller connected, and dispatched `dropzone:clear`; `multiple` mode kept a list, re-added the files already in the input on connect, and never dispatched `dropzone:clear`. Each feature of the RFC had to be written twice, and the modes differed in ways nobody chose: a prevented or rejected selection emptied the drop zone in single-file mode but kept the files in `multiple` mode, and the preview template only worked in `multiple` mode. Single-file mode is now the stored list of files capped at one, and both modes go through the same steps for each selection: the input is put back to the stored files right away (also while `dropzone:pre-add` listeners are processing), the dropped files are checked against `accept`, the `dropzone:pre-add` listeners run, then the files are added (single-file mode: the new file replaces the previous one, and the files over the first one are rejected with `max_files`), the input is updated, the preview is rendered and `dropzone:change` is dispatched. | Case | Before | After | ------------------------------------------------- | ---------------------------------------------- | --- | Single-file mode, controller connects with a file | input emptied, `dropzone:clear` | file kept and shown | `multiple` mode, last file removed | no `dropzone:clear` | `dropzone:clear` | Form reset | drop zone keeps showing the files | cleared, `dropzone:clear` | Single-file mode, selection prevented by a `dropzone:pre-add` listener | drop zone emptied | previous file kept, as in `multiple` mode | Single-file mode, preview template | not used | rendered in the preview, its remove slot clears | `multiple` mode, selection of files already in the list | `dropzone:change` | no event | Drag of text or a link over the drop zone | `dragging` | ignored | Drag over a child of the drop zone in Safari | `dragging` ends (`relatedTarget` is `null`) | `dragging` kept | Image previews | read again on every render, an outdated read can show the image of a replaced file | read once per file, never shown for another file `dropzone:change` keeps its payload (a `File` in single-file mode, a `FileList` in `multiple` mode), to stay compatible: changing it is left for 4.0. The form theme now renders the `dropzone_preview_item_template` block and the `remove_label` value in both modes. The drag state keeps the elements a drag has entered, from `dragenter` and `dragleave`, instead of reading `relatedTarget`, which WebKit does not set, and forgets the elements removed during the drag. `onMultipleChange()` is merged into `onInputChange()`. `src/Dropzone/UPGRADE.md` explains the changes for code listening to `dropzone:clear` on connect or to `dropzone:change`, and for controllers that extend this one. Tests: unit tests for a file kept on connect without `dropzone:clear`, a prevented selection and a pending one in single-file mode, a selection of several files in single-file mode, an outdated image read, a form reset, a prevented form reset, a disconnect during a form reset, the clear button after a failed connect, the preview template in single-file mode, `dropzone:clear` after the last removal in `multiple` mode, a selection that adds no file in `multiple` mode, one read per image, an image read again after a failed read, a drag without files, a drag over a child without `relatedTarget`, and a drag over an element removed during the drag; PHPUnit tests for the template block and the `remove_label` value in single-file mode; Playwright tests for a form reset and the last removal in `multiple` mode. The new tests fail on the base of this PR. Two tests of the base changed: the single-file mode `file chosen` test now picks the file with a writable `files` property like the other tests, as `@testing-library/user-event` makes it read-only while the controller now writes the input on every selection; and the test of a prevented selection after a pending one now expects the previous file to be kept.
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
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.
Third step of the RFC in #4142.
The controller shows and hides the input, the placeholder and the preview with
element.style.display, and the form theme rendersstyle="display: none". Inline styles win over the utility classes an app sets (flex,grid,hidden), thestyleattributes needstyle-src 'unsafe-inline'under a CSP, and an app has no way to style the drop zone while files are dragged over it.The controller now uses the
hiddenattribute on these parts, and the container gets adata-stateattribute:empty,filled,draggingorprocessing(the last one wins). The theme rendershiddeninstead ofstyle="display: none", and the bundle stylesheet adds.dropzone-container [hidden] { display: none !important; }, so the default look does not change.!importantkeeps a part hidden when an app rule with the same specificity, loaded later, setsdisplayon it, as the inline style did. Thedraggingstate is also set inmultiplemode.In single mode, the visible parts are now computed from two flags (a file is shown, files are dragged over) instead of being set by each event handler. This replaces the deferred check in
onDrop()for Chrome, which fires nochangewhen the very same file is dropped again: the drop now only ends the drag, one tick later, so the input stays shown until the browser has put the dropped files into it. A controller that reconnects also ends a drag it missed the end of. It also fixes a drag that leaves an empty drop zone, which used to hide the placeholder and show an empty preview.style.displayhiddenattributedata-statestyle="display: none"displayrule on these parts[hidden]rule (seeUPGRADE.md)The last row is the behavior change: a rule of the app's own CSS that sets
displayon these classes wins over the browser's[hidden]style. The newsrc/Dropzone/UPGRADE.mdexplains what to add, and what to change in a theme that overridesdropzone_widget.Tests: unit tests for each state and the visibility in both modes, the image preview, a drag leaving an empty or a filled drop zone, the same file dropped again, the input staying shown while the drop is dispatched, a reconnect during a drag, and a theme with inline styles. Playwright tests for the states and the visibility through the e2e app, and one that loads only the bundle stylesheet, next to an app rule that sets
displayon the parts: the e2e app loads Bootstrap, whose[hidden] { display: none !important }would hide the parts even without the bundle rule. All of them pass on Chrome lowest, Chrome latest and Firefox latest, and the new ones fail on #4143.