File tree Expand file tree Collapse file tree 2 files changed +21
-0
lines changed Expand file tree Collapse file tree 2 files changed +21
-0
lines changed Original file line number Diff line number Diff line change @@ -37,6 +37,7 @@ export type {
37
37
38
38
export interface TriggerRef {
39
39
nativeElement : HTMLElement ;
40
+ popupElement : HTMLElement ;
40
41
forceAlign : VoidFunction ;
41
42
}
42
43
@@ -239,7 +240,12 @@ export function generateTrigger(
239
240
const id = useId ( ) ;
240
241
const [ popupEle , setPopupEle ] = React . useState < HTMLDivElement > ( null ) ;
241
242
243
+ // Used for forwardRef popup. Not use internal
244
+ const externalPopupRef = React . useRef < HTMLDivElement > ( null ) ;
245
+
242
246
const setPopupRef = useEvent ( ( node : HTMLDivElement ) => {
247
+ externalPopupRef . current = node ;
248
+
243
249
if ( isDOM ( node ) && popupEle !== node ) {
244
250
setPopupEle ( node ) ;
245
251
}
@@ -462,6 +468,7 @@ export function generateTrigger(
462
468
// ============================ Refs ============================
463
469
React . useImperativeHandle ( ref , ( ) => ( {
464
470
nativeElement : externalForwardRef . current ,
471
+ popupElement : externalPopupRef . current ,
465
472
forceAlign : triggerAlign ,
466
473
} ) ) ;
467
474
Original file line number Diff line number Diff line change @@ -36,4 +36,18 @@ describe('Trigger.Ref', () => {
36
36
container . querySelector ( 'button' ) ,
37
37
) ;
38
38
} ) ;
39
+
40
+ it ( 'support popupElement' , ( ) => {
41
+ const triggerRef = React . createRef < TriggerRef > ( ) ;
42
+
43
+ render (
44
+ < Trigger ref = { triggerRef } popupVisible popup = { < div /> } >
45
+ < button />
46
+ </ Trigger > ,
47
+ ) ;
48
+
49
+ expect ( triggerRef . current . popupElement ) . toBe (
50
+ document . querySelector ( '.rc-trigger-popup' ) ,
51
+ ) ;
52
+ } ) ;
39
53
} ) ;
You can’t perform that action at this time.
0 commit comments