Partially out-of-view window jumps and changes position when handle is touched
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 30/100
- Issue type
- Bug
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- javascript
- Domain
- frontend
Research direction
Start by creating a minimal reproduction of a partially out-of-view window using the draggable component inside a scrolling parent. Compare the window position and parent scroll state before and after touching the title handle, using the reported onDragStop workaround as a reference. Done means the window does not jump, unexpectedly scroll into view, or change position relative to its peers.
Written by the indexing model from the issue text.
Description
Hi, I'm making a windowing system (for which, thanks for your utility).
But there's something odd. When I click on the title (which is the handle) of the pictured window, then it jumps fully into view (by scrolling the parent), and also changes its top/left co-ordinates (moving it away from its peers).
I've had to compensate by adding the following code to the onStop method (note the reversal of the deltaY values, and the counter-scroll operation):
const onDragStop = (e, data) => {
if (data.deltaY) {
panelFrameElementRef.current.scrollTop -= data.deltaY
}
setWindowConfigSpecs((oldState) => {
return {...oldState, top:data.y - data.deltaY, left: data.x}
})
}
Any suggestions?
- Dominant language
- JavaScript
- Stars
- 9.3k
- Forks
- 1k
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 4
Getting set up
We have not checked this project's setup files yet. Start from its README, and see our first-contribution guide for the general steps.
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react-grid-layout/react-draggable
-
Difficulty 3/5 1-2 days Newbie friendliness 72/100
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
react-grid-layout/react-draggable#784 · 4 comments · 2 reactions ·
-
Difficulty 3/5 1-2 days Newbie friendliness 45/100
react-grid-layout/react-draggable#782 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 25/100
react-grid-layout/react-draggable#781 · 1 comment · 2 reactions ·
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
react-grid-layout/react-draggable#780 · 8 comments ·
All issues in react-grid-layout/react-draggable
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 92/100
parse-community/parse-server#10699 · 1 comment ·
Maintainers usually reply within 1 day
-
area: dashboard bug perceived difficulty: 3
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
Nitjsefnie-Harness-Commons/daedalus#1179 ·
Maintainers usually reply within 1 day
-
Aframe enhancement javascript
Difficulty 1/5 Under an hour Newbie friendliness 92/100
webarkit/Aframe-nft#17 ·
-
spec-feedback
Difficulty 2/5 1-3 hours Newbie friendliness 75/100