IBX-8789: Fix double handling of file upload on window d&d #1332
Conversation
| @@ -110,6 +110,7 @@ export default class MultiFileUploadModule extends Component { | |||
|
|
|||
| handleDropOnWindow(event) { | |||
| this.preventDefaultAction(event); | |||
| event.stopImmediatePropagation(); | |||
There was a problem hiding this comment.
Note: MFU is rendered twice in Sub-items, because extraAction items are rendered twice - once in the normal list and once in the popup list. Even though at the given time one of them always is hidden, they are always both rendered.
Because of this we want to prevent one of them from handling file d&d, so that it is handled only by one of them. Regular event.stopPropagation() does not work, because both handlers are attached to the same node thus we need in this case event.stopImmediatePropagation().
ref. https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation
tischsoic
force-pushed
the
IBX-8789-d-and-d-double-upload-problem
branch
from
a58d047
to
3cfefbe
Compare
|
Unfortunately this fix impacts drag and drop on Multi-upload modal, vide recording. 2024-08-28_14-46-18.mp4 |
| @@ -122,7 +131,7 @@ export default class DropAreaComponent extends Component { | |||
| }); | |||
|
|
|||
| return ( | |||
| <form className="c-drop-area" multiple={true} onDrop={this.handleUpload}> | |||
There was a problem hiding this comment.
It seems that multiple attribute does nothing and can be deleted.
| @@ -122,7 +131,7 @@ export default class DropAreaComponent extends Component { | |||
| }); | |||
|
|
|||
| return ( | |||
| <form className="c-drop-area" multiple={true} onDrop={this.handleUpload}> | |||
| <form className="c-drop-area" onDrop={this.handleUpload} ref={this._refForm}> | |||
There was a problem hiding this comment.
We need to use standard addEventListener because of how React handles the events, namely React has one event listener on the root instead of individual elements and an event listener from MultiFileUploadModule added with removeEventListener was called before onDrop listener even though onDrop is attached on a deeper node in the DOM.
src/bundle/ui-dev/src/modules/multi-file-upload/components/drop-area/drop.area.component.js
Outdated
Show resolved
Hide resolved
src/bundle/ui-dev/src/modules/multi-file-upload/components/drop-area/drop.area.component.js
Outdated
Show resolved
Hide resolved
tischsoic
force-pushed
the
IBX-8789-d-and-d-double-upload-problem
branch
from
e442fcb
to
4296f0c
Compare
|
|
QA Approved on Ibexa DXP Experience 4.6-dev. |
|
Merged up:
|
Description:
For QA:
Documentation: