fix: hide indicator outside the droppable area (#477)

[curly210102]

Resolves ant-design/ant-design#31555, resolves #477

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/react-component/tree/4svGaubrM3WKbzJ1BzCETaC3WEYN
✅ Preview: https://tree-git-fork-curly210102-fix-bug-react-component.vercel.app

[codecov]

Codecov Report

Merging #478 (5750833) into master (d2da30c) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master     #478   +/-   ##
=======================================
  Coverage   99.74%   99.75%           
=======================================
  Files          11       11           
  Lines        1194     1203    +9     
  Branches      354      349    -5     
=======================================
+ Hits         1191     1200    +9     
  Misses          3        3           

Impacted Files	Coverage Δ
src/Tree.tsx	99.55% <100.00%> (+<0.01%)	⬆️
src/util.tsx	99.26% <0.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d2da30c...5750833. Read the comment docs.

[07akioni]

Suggested change

	posToArr
	posToArr,

[07akioni]

currentMouseOverDroppableNodeKey

[curly210102]

@07akioni find a new problem with this solution, drag enter/leave event fired when hovering children element. Refer to https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element, I add a dragenter counter to check whether the mouse leave the draggable element.

[07akioni]

, drag enter/leave event fired when hovering children element. R

Why not checking currentTarget?

[curly210102]

Checking event.currentTarget === event.target? As the cursor switches between the internal blank area and the child element, event.target will return the draggable element node multiple times(Codepen Demo). Thus, It cannot used to check the cursor has left.

[07akioni]

Codepen Demo

Nice demo.

How about

onDragLeave:
if (e.currentTarget.contains(e.relatedTarget)) {
  do nothing
} else {
  mark leave
}

onDragEnter:
if (e.currentTarget === e.target) {
  mark enter
}

[curly210102]

e.currentTarget.contains(e.relatedTarget)

awesome! It's a better solution.