Merge pull request #6325 from melloware/forwardref

FloatLabel/StepperPanel proper use of forwardRef
primefaces · Apr 8, 2024 · 27c32d6 · 27c32d6
2 parents 860dff3 + f932f41
commit 27c32d6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/components/lib/floatlabel/FloatLabel.js b/components/lib/floatlabel/FloatLabel.js
@@ -2,22 +2,28 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
-import { classNames } from '../utils/Utils';
+import { classNames, ObjectUtils } from '../utils/Utils';
 import { FloatLabelBase } from './FloatLabelBase';
 
 export const FloatLabel = React.memo(
-    React.forwardRef((inProps) => {
+    React.forwardRef((inProps, ref) => {
         const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = FloatLabelBase.getProps(inProps, context);
+        const elementRef = React.useRef(ref);
         const { ptm, cx, isUnstyled } = FloatLabelBase.setMetaData({
             props
         });
 
         useHandleStyle(FloatLabelBase.css.styles, isUnstyled, { name: 'floatlabel' });
 
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(elementRef, ref);
+        }, [elementRef, ref]);
+
         const rootProps = mergeProps(
             {
+                ref: elementRef,
                 className: classNames(cx('root'))
             },
             FloatLabelBase.getOtherProps(props),

diff --git a/components/lib/stepperpanel/StepperPanel.js b/components/lib/stepperpanel/StepperPanel.js
@@ -1,19 +1,25 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { ObjectUtils } from '../utils/Utils';
 import { StepperPanelBase } from './StepperPanelBase';
 
 export const StepperPanel = React.memo(
-    React.forwardRef((inProps) => {
+    React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = StepperPanelBase.getProps(inProps, context);
+        const elementRef = React.useRef(ref);
         const { isUnstyled } = StepperPanelBase.setMetaData({
             props
         });
 
         useHandleStyle(StepperPanelBase.css.styles, isUnstyled, { name: 'StepperPanel' });
 
-        return <>{props.children}</>;
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(elementRef, ref);
+        }, [elementRef, ref]);
+
+        return <span ref={ref}>{props.children}</span>;
     })
 );