[v5] [table] fix: stop using findDOMNode in Draggable interactions

packages/core/src/components/editable-text/editableText.tsx

@@ -55,6 +55,14 @@ export interface EditableTextProps extends IntentProps, Props {
      */
     disabled?: boolean;
 
+    /**
+     * Ref to attach to the root element rendered by this component.
+     *
+     * N.B. this may be renamed to simply `ref` in a future major version of Blueprint, when this class component is
+     * refactored into a function.
+     */
+    elementRef?: React.RefObject<HTMLDivElement>;
+
     /** Whether the component is currently being edited. */
     isEditing?: boolean;
 
@@ -205,7 +213,7 @@ export class EditableText extends AbstractPureComponent<EditableTextProps, Edita
     }
 
     public render() {
-        const { alwaysRenderInput, disabled, multiline, contentId } = this.props;
+        const { alwaysRenderInput, disabled, elementRef, multiline, contentId } = this.props;
         const value = this.props.value ?? this.state.value;
         const hasValue = value != null && value !== "";
 
@@ -247,7 +255,7 @@ export class EditableText extends AbstractPureComponent<EditableTextProps, Edita
         const spanProps: React.HTMLProps<HTMLSpanElement> = contentId != null ? { id: contentId } : {};
 
         return (
-            <div className={classes} onFocus={this.handleFocus} tabIndex={tabIndex}>
+            <div className={classes} onFocus={this.handleFocus} tabIndex={tabIndex} ref={elementRef}>
                 {alwaysRenderInput || this.state.isEditing ? this.renderInput(value) : undefined}
                 {shouldHideContents ? undefined : (
                     <span

packages/core/src/components/popover/popover.tsx

@@ -19,15 +19,7 @@ import classNames from "classnames";
 import * as React from "react";
 import { Manager, Modifier, Popper, PopperChildrenProps, Reference, ReferenceChildrenProps } from "react-popper";
 
-import {
-    AbstractPureComponent,
-    Classes,
-    DISPLAYNAME_PREFIX,
-    HTMLDivProps,
-    mergeRefs,
-    refHandler,
-    Utils,
-} from "../../common";
+import { AbstractPureComponent, Classes, DISPLAYNAME_PREFIX, HTMLDivProps, refHandler, Utils } from "../../common";
 import * as Errors from "../../common/errors";
 import { Overlay } from "../overlay/overlay";
 import { ResizeSensor } from "../resize-sensor/resizeSensor";
@@ -174,17 +166,20 @@ export class Popover<
      * DOM element that contains the popover.
      * When `usePortal={true}`, this element will be portaled outside the usual DOM flow,
      * so this reference can be very useful for testing.
+     *
+     * @public for testing
      */
     public popoverElement: HTMLElement | null = null;
 
-    /** DOM element that contains the target. */
-    public targetElement: HTMLElement | null = null;
-
     /** Popover ref handler */
     private popoverRef: React.Ref<HTMLDivElement> = refHandler(this, "popoverElement", this.props.popoverRef);
 
-    /** Target ref handler */
-    private targetRef: React.Ref<HTMLElement> = el => (this.targetElement = el);
+    /**
+     * Target DOM element ref.
+     *
+     * @public for testing
+     */
+    public targetRef = React.createRef<HTMLElement>();
 
     private cancelOpenTimeout?: () => void;
 
@@ -243,7 +238,7 @@ export class Popover<
 
         return (
             <Manager>
-                <Reference>{this.renderTarget}</Reference>
+                <Reference innerRef={this.targetRef}>{this.renderTarget}</Reference>
                 <Popper
                     innerRef={this.popoverRef}
                     placement={placement ?? positionToPlacement(position)}
@@ -319,7 +314,7 @@ export class Popover<
      */
     public reposition = () => this.popperScheduleUpdate?.();
 
-    private renderTarget = ({ ref: popperChildRef }: ReferenceChildrenProps) => {
+    private renderTarget = ({ ref }: ReferenceChildrenProps) => {
         const { children, className, fill, openOnTargetFocus, renderTarget } = this.props;
         const { isOpen } = this.state;
         const isControlled = this.isControlled();
@@ -330,8 +325,6 @@ export class Popover<
             targetTagName = "div";
         }
 
-        const ref = mergeRefs(popperChildRef, this.targetRef);
-
         const targetEventHandlers: PopoverHoverTargetHandlers<T> | PopoverClickTargetHandlers<T> =
             isHoverInteractionKind
                 ? {
@@ -412,8 +405,10 @@ export class Popover<
             target = wrappedTarget;
         }
 
+        // N.B. we must attach the ref ('wrapped' with react-popper functionality) to the DOM element here and
+        // let ResizeSensor know about it
         return (
-            <ResizeSensor targetRef={ref} onResize={this.reposition}>
+            <ResizeSensor targetRef={this.targetRef} onResize={this.reposition}>
                 {target}
             </ResizeSensor>
         );
@@ -670,14 +665,14 @@ export class Popover<
     };
 
     private handleOverlayClose = (e?: React.SyntheticEvent<HTMLElement>) => {
-        if (this.targetElement === null || e === undefined) {
+        if (this.targetRef.current == null || e === undefined) {
             return;
         }
 
         const event = (e.nativeEvent ?? e) as Event;
         const eventTarget = (event.composed ? event.composedPath()[0] : event.target) as HTMLElement;
         // if click was in target, target event listener will handle things, so don't close
-        if (!Utils.elementIsOrContains(this.targetElement, eventTarget) || e.nativeEvent instanceof KeyboardEvent) {
+        if (!Utils.elementIsOrContains(this.targetRef.current, eventTarget) || e.nativeEvent instanceof KeyboardEvent) {
             this.setOpenState(false, e);
         }
     };
@@ -716,7 +711,8 @@ export class Popover<
 
     private updateDarkParent() {
         if (this.props.usePortal && this.state.isOpen) {
-            const hasDarkParent = this.targetElement != null && this.targetElement.closest(`.${Classes.DARK}`) != null;
+            const hasDarkParent =
+                this.targetRef.current != null && this.targetRef.current.closest(`.${Classes.DARK}`) != null;
             this.setState({ hasDarkParent });
         }
     }

packages/core/src/components/resize-sensor/resize-sensor.md

@@ -1,6 +1,6 @@
 @# Resize sensor
 
-ResizeSensor observes the DOM and provides a callback for `"resize"` events on a single child element.
+__ResizeSensor__ observes the DOM and provides a callback for `"resize"` events on a single child element.
 It is a thin wrapper around [`ResizeObserver`][resizeobserver] to provide React bindings.
 
 [resizeobserver]: https://developers.google.com/web/updates/2016/10/resizeobserver

packages/core/src/components/resize-sensor/resizeSensor.tsx

@@ -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>;
 }
 
 /**
@@ -68,7 +68,7 @@ export interface ResizeSensorProps {
 export class ResizeSensor extends AbstractPureComponent<ResizeSensorProps> {
     public static displayName = `${DISPLAYNAME_PREFIX}.ResizeSensor`;
 
-    private targetRef = React.createRef<HTMLElement>();
+    private targetRef = this.props.targetRef ?? React.createRef<HTMLElement>();
 
     private prevElement: HTMLElement | undefined = undefined;
 

packages/core/test/popover/popoverTests.tsx

@@ -827,7 +827,7 @@ describe("<Popover>", () => {
 
         const instance = wrapper.instance() as Popover<React.HTMLProps<HTMLButtonElement>>;
         wrapper.popoverElement = instance.popoverElement!;
-        wrapper.targetElement = instance.targetElement!;
+        wrapper.targetElement = instance.targetRef.current!;
         wrapper.assertFindClass = (className: string, expected = true, msg = className) => {
             const actual = wrapper!.findClass(className);
             if (expected) {

packages/table/src/cell/editableCell.tsx

@@ -70,7 +70,7 @@ export interface EditableCellProps extends CellProps {
     /**
      * Props that should be passed to the EditableText when it is used to edit
      */
-    editableTextProps?: EditableTextProps;
+    editableTextProps?: Omit<EditableTextProps, "elementRef">;
 }
 
 export interface EditableCellState {
@@ -90,13 +90,9 @@ export class EditableCell extends React.Component<EditableCellProps, EditableCel
         wrapText: false,
     };
 
-    private cellRef: HTMLElement | null | undefined;
+    private cellRef = React.createRef<HTMLDivElement>();
 
-    private refHandlers = {
-        cell: (ref: HTMLElement | null) => {
-            this.cellRef = ref;
-        },
-    };
+    private contentsRef = React.createRef<HTMLDivElement>();
 
     public constructor(props: EditableCellProps) {
         super(props);
@@ -146,6 +142,7 @@ export class EditableCell extends React.Component<EditableCellProps, EditableCel
                     {...editableTextProps}
                     isEditing={true}
                     className={classNames(Classes.TABLE_EDITABLE_TEXT, Classes.TABLE_EDITABLE_NAME, className)}
+                    elementRef={this.contentsRef}
                     intent={spreadableProps.intent}
                     minWidth={0}
                     onCancel={this.handleCancel}
@@ -163,7 +160,11 @@ export class EditableCell extends React.Component<EditableCellProps, EditableCel
                 [Classes.TABLE_NO_WRAP_TEXT]: !wrapText,
             });
 
-            cellContents = <div className={textClasses}>{savedValue}</div>;
+            cellContents = (
+                <div className={textClasses} ref={this.contentsRef}>
+                    {savedValue}
+                </div>
+            );
         }
 
         return (
@@ -172,14 +173,15 @@ export class EditableCell extends React.Component<EditableCellProps, EditableCel
                 wrapText={wrapText}
                 truncated={false}
                 interactive={interactive}
-                cellRef={this.refHandlers.cell}
+                cellRef={this.cellRef}
                 onKeyPress={this.handleKeyPress}
             >
                 <Draggable
                     onActivate={this.handleCellActivate}
                     onDoubleClick={this.handleCellDoubleClick}
                     preventDefault={false}
                     stopPropagation={interactive}
+                    targetRef={this.contentsRef}
                 >
                     {cellContents}
                 </Draggable>
@@ -206,7 +208,7 @@ export class EditableCell extends React.Component<EditableCellProps, EditableCel
     private checkShouldFocus() {
         if (this.props.isFocused && !this.state.isEditing) {
             // don't focus if we're editing -- we'll lose the fact that we're editing
-            this.cellRef?.focus();
+            this.cellRef.current?.focus();
         }
     }
 

packages/table/src/cell/editableCell2.tsx

@@ -70,7 +70,7 @@ export interface EditableCell2Props extends Omit<CellProps, "onKeyDown" | "onKey
     /**
      * Props that should be passed to the EditableText when it is used to edit
      */
-    editableTextProps?: EditableTextProps;
+    editableTextProps?: Omit<EditableTextProps, "elementRef">;
 }
 
 export interface EditableCell2State {
@@ -92,13 +92,9 @@ export class EditableCell2 extends React.Component<EditableCell2Props, EditableC
         wrapText: false,
     };
 
-    private cellRef: HTMLElement | null | undefined;
+    private cellRef = React.createRef<HTMLDivElement>();
 
-    private refHandlers = {
-        cell: (ref: HTMLElement | null) => {
-            this.cellRef = ref;
-        },
-    };
+    private contentsRef = React.createRef<HTMLDivElement>();
 
     public state: EditableCell2State = {
         isEditing: false,
@@ -157,6 +153,7 @@ export class EditableCell2 extends React.Component<EditableCell2Props, EditableC
                     {...editableTextProps}
                     isEditing={true}
                     className={classNames(Classes.TABLE_EDITABLE_TEXT, Classes.TABLE_EDITABLE_NAME, className)}
+                    elementRef={this.contentsRef}
                     intent={spreadableProps.intent}
                     minWidth={0}
                     onCancel={this.handleCancel}
@@ -174,7 +171,11 @@ export class EditableCell2 extends React.Component<EditableCell2Props, EditableC
                 [Classes.TABLE_NO_WRAP_TEXT]: !wrapText,
             });
 
-            cellContents = <div className={textClasses}>{savedValue}</div>;
+            cellContents = (
+                <div className={textClasses} ref={this.contentsRef}>
+                    {savedValue}
+                </div>
+            );
         }
 
         return (
@@ -183,7 +184,7 @@ export class EditableCell2 extends React.Component<EditableCell2Props, EditableC
                 wrapText={wrapText}
                 truncated={false}
                 interactive={interactive}
-                cellRef={this.refHandlers.cell}
+                cellRef={this.cellRef}
                 onKeyDown={handleKeyDown}
                 onKeyPress={this.handleKeyPress}
                 onKeyUp={handleKeyUp}
@@ -194,6 +195,7 @@ export class EditableCell2 extends React.Component<EditableCell2Props, EditableC
                     onDoubleClick={this.handleCellDoubleClick}
                     preventDefault={false}
                     stopPropagation={interactive}
+                    targetRef={this.contentsRef}
                 >
                     {cellContents}
                 </Draggable>
@@ -204,7 +206,7 @@ export class EditableCell2 extends React.Component<EditableCell2Props, EditableC
     private checkShouldFocus() {
         if (this.props.isFocused && !this.state.isEditing) {
             // don't focus if we're editing -- we'll lose the fact that we're editing
-            this.cellRef?.focus();
+            this.cellRef.current?.focus();
         }
     }
 

packages/table/src/common/contextMenuTargetWrapper.tsx

@@ -29,6 +29,7 @@ export interface ContextMenuTargetWrapperProps extends Props {
     children?: React.ReactNode;
     renderContextMenu: (e: React.MouseEvent<HTMLElement>) => JSX.Element | undefined;
     style: React.CSSProperties;
+    targetRef?: React.RefObject<HTMLDivElement>;
 }
 
 /**
@@ -40,9 +41,9 @@ export interface ContextMenuTargetWrapperProps extends Props {
 @ContextMenuTargetLegacy
 export class ContextMenuTargetWrapper extends React.PureComponent<ContextMenuTargetWrapperProps> {
     public render() {
-        const { className, children, style } = this.props;
+        const { className, children, targetRef, style } = this.props;
         return (
-            <div className={className} style={style}>
+            <div className={className} style={style} ref={targetRef}>
                 {children}
             </div>
         );

packages/table/src/deprecatedAliases.ts

@@ -18,12 +18,12 @@ export {
     /** @deprecated import ColumnHeaderCell instead */
     ColumnHeaderCell as ColumnHeaderCell2,
     /** @deprecated import ColumnHeaderCellProps instead */
-    ColumnHeaderCellProps as ColumnHeaderCellProps2,
+    type ColumnHeaderCellProps as ColumnHeaderCellProps2,
 } from "./headers/columnHeaderCell";
 
 export {
     /** @deprecated import RowHeaderCell instead */
     RowHeaderCell as RowHeaderCell2,
     /** @deprecated import RowHeaderCellProps instead */
-    RowHeaderCellProps as RowHeaderCellProps2,
+    type RowHeaderCellProps as RowHeaderCellProps2,
 } from "./headers/rowHeaderCell";