diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx index d19ee824a..cefee17c1 100644 --- a/src/BaseSelect/index.tsx +++ b/src/BaseSelect/index.tsx @@ -4,6 +4,7 @@ import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect'; import useMergedState from '@rc-component/util/lib/hooks/useMergedState'; import isMobile from '@rc-component/util/lib/isMobile'; import { useComposeRef } from '@rc-component/util/lib/ref'; +import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode'; import type { ScrollConfig, ScrollTo } from 'rc-virtual-list/lib/List'; import * as React from 'react'; import { useAllowClear } from '../hooks/useAllowClear'; @@ -330,11 +331,11 @@ const BaseSelect = React.forwardRef((props, ref) // ============================== Refs ============================== const containerRef = React.useRef(null); - const selectorDomRef = React.useRef(null); const triggerRef = React.useRef(null); const selectorRef = React.useRef(null); const listRef = React.useRef(null); const blurRef = React.useRef(false); + const customDomRef = React.useRef(null); /** Used for component focused management */ const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset(); @@ -344,7 +345,10 @@ const BaseSelect = React.forwardRef((props, ref) focus: selectorRef.current?.focus, blur: selectorRef.current?.blur, scrollTo: (arg) => listRef.current?.scrollTo(arg), - nativeElement: containerRef.current || selectorDomRef.current, + nativeElement: + containerRef.current || + selectorRef.current?.nativeElement || + (getDOM(customDomRef.current) as HTMLElement), })); // ========================== Search Value ========================== @@ -368,7 +372,7 @@ const BaseSelect = React.forwardRef((props, ref) typeof getRawInputElement === 'function' && getRawInputElement(); const customizeRawInputRef = useComposeRef( - selectorDomRef, + customDomRef, customizeRawInputElement?.props?.ref, ); @@ -808,12 +812,6 @@ const BaseSelect = React.forwardRef((props, ref) builtinPlacements={builtinPlacements} getPopupContainer={getPopupContainer} empty={emptyOptions} - getTriggerDOMNode={(node) => - // TODO: This is workaround and should be removed in `rc-select` - // And use new standard `nativeElement` for ref. - // But we should update `rc-resize-observer` first. - selectorDomRef.current || node - } onPopupVisibleChange={onTriggerVisibleChange} onPopupMouseEnter={onPopupMouseEnter} > @@ -826,7 +824,6 @@ const BaseSelect = React.forwardRef((props, ref) {...props} prefixClassName={classNames?.prefix} prefixStyle={styles?.prefix} - domRef={selectorDomRef} prefixCls={prefixCls} inputElement={customizeInputElement} ref={selectorRef} diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx index 140471d39..bcfc6dc16 100644 --- a/src/SelectTrigger.tsx +++ b/src/SelectTrigger.tsx @@ -73,7 +73,6 @@ export interface SelectTriggerProps { popupAlign: AlignType; empty: boolean; - getTriggerDOMNode: (node: HTMLElement) => HTMLElement; onPopupVisibleChange?: (visible: boolean) => void; onPopupMouseEnter: () => void; @@ -101,7 +100,6 @@ const SelectTrigger: React.ForwardRefRenderFunction {children} diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx index af0062405..878b9672c 100644 --- a/src/Selector/index.tsx +++ b/src/Selector/index.tsx @@ -52,6 +52,7 @@ export interface RefSelectorProps { focus: (options?: FocusOptions) => void; blur: () => void; scrollTo?: ScrollTo; + nativeElement: HTMLDivElement; } export interface SelectorProps { @@ -98,11 +99,6 @@ export interface SelectorProps { onInputKeyDown?: React.KeyboardEventHandler; // on inner input blur onInputBlur?: () => void; - /** - * @private get real dom for trigger align. - * This may be removed after React provides replacement of `findDOMNode` - */ - domRef: React.Ref; } const Selector: React.ForwardRefRenderFunction = (props, ref) => { @@ -127,11 +123,11 @@ const Selector: React.ForwardRefRenderFunction onToggleOpen, onInputKeyDown, onInputBlur, - - domRef, } = props; // ======================= Ref ======================= + const containerRef = React.useRef(null); + React.useImperativeHandle(ref, () => ({ focus: (options) => { inputRef.current.focus(options); @@ -139,6 +135,7 @@ const Selector: React.ForwardRefRenderFunction blur: () => { inputRef.current.blur(); }, + nativeElement: containerRef.current, })); // ====================== Input ====================== @@ -290,7 +287,7 @@ const Selector: React.ForwardRefRenderFunction return (