Actionchains Drag and Drop is not working with vue.js elements

[mtplewis]

🐛 Bug Report

When attempting to use ActionChains to drag and drop element on a webpage that uses vue.js, selenium is not properly dragging and releasing the object.

To Reproduce

Detailed steps to reproduce the behavior:

Navigate to https://sortablejs.github.io/Vue.Draggable/#/simple
Using action chains, attempt to drag the element containing the text "John" to the element containing the test "Jean"
Observe that the "John" element is selected but not dragged

Expected behavior

Vue.JS elements can be drag and dropped using actionchains

Test script or set of commands reproducing this issue

from selenium import webdriver

from selenium.webdriver import ActionChains
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get('https://sortablejs.github.io/Vue.Draggable/#/simple')
dragged = driver.find_element(By.XPATH, "//div[@class='col-6']//div[@class='list-group-item'][contains(text(),'John')]")
dropped = driver.find_element(By.XPATH, "//div[@class='col-6']//div[@class='list-group-item'][contains(text(),'Jean')]")

# #Drag and drop
actions = ActionChains(driver)
actions.drag_and_drop(dragged, dropped).perform()
# #column A is selected but not dragged

#Click and hold
actions = ActionChains(driver)
actions.move_to_element(dragged).click_and_hold().move_to_element(dropped).release().perform()
#Same result : column a is selected but not dragged

Environment

OS: Windows 10
Browser: Chrome
Browser version: Version 84.0.4147.125
Browser Driver version: ChromeDriver 85.0.4183.38
Language Bindings version: python 3.8.1

[v3g3t4x]

seems like my #8624

[lemieuxdevon]

This may not work for you, but I had a similar problem that was fixed when I added a one pixel offset on the x and y axis. So move_to_element(element).offset(1,1) or whatever the call is in Java.

[shwetamummadi]

I am also facing the same issue could some one help me on this, if any approach found.

[AutomatedTester]

Duplicate of #8003