Drag and Drop feature on the webpage got disabled once tag(s) is added

[Adrian-CL]

Hi, it's me again.

I have realized one behavior on the react-tag-input component which is once a tag has been added, I could not drag and drop files into my webpage anymore (I have a react-dropzone Drag and Drop section on my screen).

When I dragged my file(s) onto the screen, a "No Entry" symbol is shown besides my cursor instead of "+ Copy" label.
I do not understand what is the factor which caused this.
Can anyone please kindly advise.

[ad1992]

@Adrian-CL this shouldn't happen, is it possible to share a code sandbox example with this scenario?

[Adrian-CL]

@ad1992 I have just noticed the section regarding "Contexts" within the link below:
https://www.npmjs.com/package/react-tag-input

Can you briefly explain what is the difference between withcontext and withoutcontext?
I think this is should be the reason that causes the issue.

I tried to create an example within the code sandbox but failed after adding in react-dropzone component, still trying to figure out tho.

[Adrian-CL]

@ad1992 I have successfully created an example which can reproduce the issue I am facing now.

Please follow the link: https://stackblitz.com/edit/react-tag-input-xlbgc6?embed=1&file=index.js
you will realize that Drag and Drop action is not possible until all the tags are removed

[ad1992]

@Adrian-CL thanks for sharing, will look into this

[Adrian-CL]

hi @ad1992,

Sorry to bother you.
Did you get the chance to investigate and find out the root cause for this?

[ad1992]

@Adrian-CL I looked into this issue, there is an onDragOver listener getting attached to the window instead of document by react-dnd-html5-backenddue to which onDragOver on react-dropzone is getting overridden and the file is not dropped, if this event is removed it works fine. Probably this issue will get fixed once react-dnd is upgraded as it attaches all listeners to the root node instead of window so I will try updating it soon this week.

[Adrian-CL]

@ad1992
Noted with much thanks.
I will wait for the fix to be rolled out then.

[Adrian-CL]

hi @ad1992

May I know if version 6.6.1 has already included the fix and upgrade?

[ad1992]

@Adrian-CL the react-dnd has been updated to the latest version but it still attaches the listener to window, but I will still test it once with react-dropzone and check if the issue still exists and figure out the next steps.
It has not yet been released as there are some improvements pending for this release, will be releasing the next version in 1-2 weeks.

[ad1992]

@Adrian-CL this issue is resolved, you can try it out here or use the package aakansha-react-tag-input :)
Let me know if it works for you, you will have to update peer dependencies as well to latest version as shown in above link.
Will be released in the next version.

[Adrian-CL]

hi @ad1992 thanks for the update.
Unfortunately I am not able to try it out because of the error "(0 , _reactDnd.DragDropContext) is not a function"
Apparently deprecated react-dnd and react-dnd-html5-backend v8 need to be used.

May I know how did you fix this?

[ad1992]

@Adrian-CL as mentioned above you will update peer dependencies as done in the above example link as well

"react": "17.0.2",
 "react-dnd": "14.0.2",
 "react-dnd-html5-backend": "14.0.0",
 "react-dom": "17.0.2",
   

[Adrian-CL]

@ad1992
Its working now, thank you.
I will try it within my project and update you with the result again.

[ad1992]

Awesome 👍🏻

[Adrian-CL]

@ad1992
Thanks a lot for your help and efforts.
I am able to implement it successfully.

[ad1992]

Glad to hear that 🎉
fixed via #729

[ad1992]

🎉 This issue has been resolved in version 6.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀