Skip to content

fix(react-draggable-dialog): sync internal dropPosition with external position prop#623

Merged
dmytrokirpa merged 6 commits intomicrosoft:mainfrom
themechbro:fix/606-draggable-dialog-position
Apr 8, 2026
Merged

fix(react-draggable-dialog): sync internal dropPosition with external position prop#623
dmytrokirpa merged 6 commits intomicrosoft:mainfrom
themechbro:fix/606-draggable-dialog-position

Conversation

@themechbro
Copy link
Copy Markdown
Contributor

@themechbro themechbro commented Mar 27, 2026

Summary
This PR fixes a bug where the DraggableDialog would jump or teleport if the position prop was updated externally.

Changes

  • Replaced useEffect with onDragStart to properly synchronize the internal dropPosition with the external position prop at the moment dragging begins.
  • Reverted unrelated changes in react-chat package types.
  • Updated useDraggableDialog.test.ts to include the new onDragStart return value.

Testing

  • Verified fix in Storybook using X/Y input controls.
  • All unit tests in react-draggable-dialog are passing.

Fixes #606
cc: @microsoft/teams-prg

@themechbro themechbro requested review from a team as code owners March 27, 2026 11:50
@tudorpopams tudorpopams requested a review from dmytrokirpa March 31, 2026 12:04
Copy link
Copy Markdown
Contributor

@dmytrokirpa dmytrokirpa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR, but it needs some changes

Comment thread packages/react-chat/src/components/ChatMessage/ChatMessage.types.ts
@dmytrokirpa dmytrokirpa added bug Something isn't working react-draggable-dialog Main label for the @fluentui-contrib/react-draggable-dialog package labels Apr 1, 2026
@dmytrokirpa
Copy link
Copy Markdown
Contributor

@themechbro Could you please update failing tests and run yarn change to generate a changeset file describing your changes.

thank you!

@ManniMansoor
Copy link
Copy Markdown

pls provide further instruction - quite bigh spark, fork generated from code
Thanks & Kind regards
Mansoor

@themechbro
Copy link
Copy Markdown
Contributor Author

@themechbro Could you please update failing tests and run yarn change to generate a changeset file describing your changes.

thank you!

Updated to use onDragStart, reverted the unrelated chat types, and updated the hook tests to match!

@themechbro themechbro requested a review from dmytrokirpa April 7, 2026 08:33
@themechbro themechbro force-pushed the fix/606-draggable-dialog-position branch from 4869d90 to 9abead2 Compare April 7, 2026 08:40
@dmytrokirpa
Copy link
Copy Markdown
Contributor

dmytrokirpa commented Apr 7, 2026

@themechbro Could you please update failing tests and run yarn change to generate a changeset file describing your changes.
thank you!

Updated to use onDragStart, reverted the unrelated chat types, and updated the hook tests to match!

Thank you, @themechbro! But I think you missed this part:

run yarn change to generate a changeset file describing your changes

So you might need to:

  • run yarn change from the repo root
  • use patch and fix: sync internal dropPosition with external position prop as a message
  • commit and push the change file

Also, please make sure to update the PR description so someone form @microsoft/teams-prg could review it

@dmytrokirpa dmytrokirpa merged commit 7bc9d82 into microsoft:main Apr 8, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working react-draggable-dialog Main label for the @fluentui-contrib/react-draggable-dialog package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug](react-draggable-dialog): Updating position after component is rendered breaks dnd

3 participants