carbon-addons-iot-react icon indicating copy to clipboard operation
carbon-addons-iot-react copied to clipboard

fix(angular-list): fix drag drop issue

Open yinglejia opened this issue 2 years ago • 1 comments

Closes #

Summary

Bug: sometimes, when drag and drop an item in the Angular list component, the item may be removed from the list unexpectedly. It is difficult to reproduce on will. Console logging shows that when the problem happens, the list component received a dragEnd event but didn't receive a dropped event. That explains why the item is removed from the list - the dropped event handler adds a duplicate and the dragEnd event handler removes the original.

Fix: according to MDN https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#specifying_drop_targets, we need to prevent the default behavior by cancelling both the dragenter and dragover events. This PR adds event handler for dragenter. With this fix, I could no longer reproduce the problem.

If you want to allow a drop, you must prevent the default behavior by cancelling both the dragenter and dragover events.

Change List (commits, features, bugs, etc)

  • items_here

Acceptance Test (how to verify the PR)

  • tests here

Regression Test (how to make sure this PR doesn't break old functionality)

  • tests here

Things to look for during review

  • [ ] Make sure all references to iot or bx class prefix is using the prefix variable
  • [ ] (React) All major areas have a data-testid attribute. New test ids should have test written to ensure they are not changed or removed.
  • [ ] UI should be checked in RTL mode to ensure the proper handling of layout and text.
  • [ ] All strings should be translatable.
  • [ ] The code should pass a11y scans (The storybook a11y knob should show no violations). New components should have a11y test written.
  • [ ] Unit test should be written and should have a coverage of 90% or higher in all areas.
  • [ ] All components should be passing visual regression test. For new styles or components either a visual regression test should be written for all permutations or the base image updated.
  • [ ] Changes or new components should either write new or update existing documentation.
  • [ ] PR should link and close out an existing issue

yinglejia avatar Mar 08 '23 17:03 yinglejia

Deploy Preview for carbon-addons-iot-react ready!

Name Link
Latest commit 6ed9898e15b76cf35cf349735d2e1869ad9bc7a9
Latest deploy log https://app.netlify.com/sites/carbon-addons-iot-react/deploys/6408c3c6b9d779000877205b
Deploy Preview https://deploy-preview-3748--carbon-addons-iot-react.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] avatar Mar 08 '23 17:03 netlify[bot]