[v5] [table] fix: stop using findDOMNode in Draggable interactions #6137
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
fix compileBuild artifact links for this commit: documentation | landing | table | demoThis is an automated comment from the deploy-preview CircleCI job. |
plumb through targetRefBuild artifact links for this commit: documentation | landing | table | demoThis is an automated comment from the deploy-preview CircleCI job. |
adidahiya
changed the title
adidahiya
commented
May 9, 2023
| @@ -330,8 +319,6 @@ export class Popover< | |||
| targetTagName = "div"; | |||
| } | |||
|
|
|||
| const ref = mergeRefs(popperChildRef, this.targetRef); | |||
There was a problem hiding this comment.
no longer need to merge refs, since react-popper is already doing that under the hood: https://github.com/floating-ui/react-popper/blob/beac280d61082852c4efc302be902911ce2d424c/src/Reference.js#L17-L23
| @@ -55,7 +55,7 @@ export interface ResizeSensorProps { | |||
| * If you attach a `ref` to the child yourself when rendering it, you must pass the | |||
| * same value here (otherwise, ResizeSensor won't be able to attach its own). | |||
| */ | |||
| targetRef?: React.Ref<any>; | |||
| targetRef?: React.RefObject<HTMLElement>; | |||
There was a problem hiding this comment.
slight breaking change - see PR description for justification
Fix Popover <> ResizeSensorBuild artifact links for this commit: documentation | landing | table | demoThis is an automated comment from the deploy-preview CircleCI job. |
Fix test typecheckBuild artifact links for this commit: documentation | landing | table | demoThis is an automated comment from the deploy-preview CircleCI job. |
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #3979
Changes proposed in this pull request:
Migrate away from
ReactDOM.findDOMNode()in the<Draggable>component by borrowing an implementation from<ResizeSensor>which clones its single React child and injects its own DOM ref.It's even simpler here than in ResizeSensor because we don't have to deal with a prop ref sent to<Draggable>.@blueprintjs/core changelog
ResizeSensor): account forprops.targetRefif specified (previously, this component would not actually take DOM measurements properly if this prop was specified)targetRefprop is now more specific, it only allows ref objects and no ref callbacks. Before this change, this prop's usage broke the component completely, so it's extremely unlikely that this break will impact any users negatively.EditableText): new propelementRefallows users to pass through a DOM ref (useful for taking measurements or implementing interactions like<Draggable>in @blueprintjs/table)@blueprintjs/table changelog
ReactDOM.findDOMNode()to implement drag & drop interactions, which unblocks support for React strict modeReviewers should focus on:
No regressions in dragging behavior in Table component demos
Screenshot
Note that there are some delays in re-rendering cells (until you scroll around a bit in some cases), but these are bugs present on develop too: