Fix #2963: Allow access to ref

components/lib/autocomplete/AutoComplete.js

@@ -13,7 +13,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
     const [searchingState, setSearchingState] = React.useState(false);
     const [focusedState, setFocusedState] = React.useState(false);
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const overlayRef = React.useRef(null);
     const inputRef = React.useRef(props.inputRef);
     const multiContainerRef = React.useRef(null);
@@ -422,6 +422,10 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useMountEffect(() => {
         if (!idState) {
             setIdState(UniqueComponentId());

components/lib/calendar/Calendar.js

@@ -12,7 +12,7 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
     const [viewDateState, setViewDateState] = React.useState(null);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const overlayRef = React.useRef(null);
     const inputRef = React.useRef(props.inputRef);
     const navigation = React.useRef(null);
@@ -2380,6 +2380,10 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useMountEffect(() => {
         let viewDate = getViewDate(props.viewDate);
         validateDate(viewDate);

components/lib/captcha/Captcha.js

@@ -3,7 +3,7 @@ import { useMountEffect, useUnmountEffect } from '../hooks/Hooks';
 import { ObjectUtils } from '../utils/Utils';
 
 export const Captcha = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const instance = React.useRef(null);
     const recaptchaScript = React.useRef(null);
     const isCaptchaLoaded = React.useRef(false);
@@ -85,6 +85,10 @@ export const Captcha = React.memo(React.forwardRef((props, ref) => {
         getResponse
     }));
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const otherProps = ObjectUtils.findDiffKeys(props, Captcha.defaultProps);
 
     return <div ref={elementRef} id={props.id} {...otherProps}></div>

components/lib/carousel/Carousel.js

@@ -25,7 +25,7 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
     const [numScrollState, setNumScrollState] = React.useState(props.numScroll);
     const [totalShiftedItemsState, setTotalShiftedItemsState] = React.useState((props.page * props.numScroll) * -1);
     const [pageState, setPageState] = React.useState(props.page);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const itemsContainerRef = React.useRef(null);
     const remainingItems = React.useRef(0);
     const allowAutoplay = React.useRef(!!props.autoplayInterval);
@@ -382,6 +382,10 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
             stopAutoplay();
         }
     });
+
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
 
     const createItems = () => {
         if (props.value && props.value.length) {

components/lib/cascadeselect/CascadeSelect.js

@@ -10,7 +10,7 @@ import { CascadeSelectSub } from './CascadeSelectSub';
 export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const overlayRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const labelRef = React.useRef(null);
@@ -186,6 +186,10 @@ export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useUpdateEffect(() => {
         updateSelectionPath();
     }, [props.value]);

components/lib/checkbox/Checkbox.js

@@ -5,7 +5,7 @@ import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Checkbox = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const inputRef = React.useRef(props.inputRef);
 
     const onClick = (event) => {
@@ -49,6 +49,10 @@ export const Checkbox = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useUpdateEffect(() => {
         inputRef.current.checked = isChecked();
     }, [props.checked, props.trueValue]);

components/lib/chips/Chips.js

@@ -5,7 +5,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Chips = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const listRef = React.useRef(null);
     const inputRef = React.useRef(props.inputRef);
 
@@ -173,6 +173,10 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const createRemoveIcon = (value, index) => {
         if (!props.disabled && !props.readOnly && isRemovable(value, index)) {
             return <span className="p-chips-token-icon pi pi-times-circle" onClick={(event) => removeItem(event, index)}></span>

components/lib/colorpicker/ColorPicker.js

@@ -8,7 +8,7 @@ import { ColorPickerPanel } from './ColorPickerPanel';
 
 export const ColorPicker = React.memo(React.forwardRef((props, ref) => {
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const overlayRef = React.useRef(null);
     const inputRef = React.useRef(props.inputRef);
     const colorSelectorRef = React.useRef(null);
@@ -441,6 +441,10 @@ export const ColorPicker = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useMountEffect(() => {
         updateHSBValue(props.value);
         updateUI();

components/lib/dropdown/Dropdown.js

@@ -10,7 +10,7 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
     const [filterState, setFilterState] = React.useState('');
     const [focusedState, setFocusedState] = React.useState(false);
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const overlayRef = React.useRef(null);
     const inputRef = React.useRef(props.inputRef);
     const focusInputRef = React.useRef(null);
@@ -546,6 +546,10 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useMountEffect(() => {
         if (props.autoFocus && focusInputRef.current) {
             focusInputRef.current.focus();

components/lib/fullcalendar/FullCalendar.js

@@ -3,7 +3,7 @@ import { useMountEffect, usePrevious, useUnmountEffect, useUpdateEffect } from '
 import { ObjectUtils } from '../utils/Utils';
 
 export const FullCalendar = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const config = React.useRef({});
     const calendar = React.useRef(null);
     const prevEvents = usePrevious(props.events);
@@ -66,6 +66,10 @@ export const FullCalendar = React.memo(React.forwardRef((props, ref) => {
         }
     });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const otherProps = ObjectUtils.findDiffKeys(props, FullCalendar.defaultProps);
 
     return <div ref={elementRef} id={props.id} style={props.style} className={props.className} {...otherProps}></div>

components/lib/galleria/Galleria.js

@@ -13,7 +13,7 @@ export const Galleria = React.memo(React.forwardRef((props, ref) => {
     const [numVisibleState, setNumVisibleState] = React.useState(props.numVisible);
     const [slideShowActiveState, setSlideShowActiveState] = React.useState(false);
     const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const previewContentRef = React.useRef(null);
     const maskRef = React.useRef(null);
     const activeItemIndex = props.onItemChange ? props.activeIndex : activeIndexState;
@@ -93,6 +93,10 @@ export const Galleria = React.memo(React.forwardRef((props, ref) => {
         setNumVisibleState(props.numVisible);
     }, [props.numVisible]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useUnmountEffect(() => {
         if (slideShowActiveState) {
             stopSlideShow();

components/lib/gmap/GMap.js

@@ -4,7 +4,7 @@ import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { ObjectUtils } from '../utils/Utils';
 
 export const GMap = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const map = React.useRef(null);
     const prevOverlays = React.useRef(null);
 
@@ -110,6 +110,10 @@ export const GMap = React.memo(React.forwardRef((props, ref) => {
         }
     });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     React.useImperativeHandle(ref, () => ({
         getMap
     }));

components/lib/image/Image.js

@@ -10,7 +10,7 @@ export const Image = React.memo(React.forwardRef((props, ref) => {
     const [previewVisibleState, setPreviewVisibleState] = React.useState(false);
     const [rotateState, setRotateState] = React.useState(0);
     const [scaleState, setScaleState] = React.useState(1);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const maskRef = React.useRef(null);
     const previewRef = React.useRef(null);
     const previewClick = React.useRef(false);
@@ -90,6 +90,10 @@ export const Image = React.memo(React.forwardRef((props, ref) => {
         maskRef.current && ZIndexUtils.clear(maskRef.current);
     });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const createPreview = () => {
         if (props.preview) {
             return (

components/lib/inputnumber/InputNumber.js

@@ -7,7 +7,7 @@ import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const InputNumber = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const inputRef = React.useRef(null);
     const timer = React.useRef(null);
     const lastValue = React.useRef(null);
@@ -941,6 +941,10 @@ export const InputNumber = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useMountEffect(() => {
         constructParser();
 

components/lib/inputswitch/InputSwitch.js

@@ -4,7 +4,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const InputSwitch = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const inputRef = React.useRef(props.inputRef);
     const checked = props.checked === props.trueValue;
 
@@ -51,6 +51,10 @@ export const InputSwitch = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const otherProps = ObjectUtils.findDiffKeys(props, InputSwitch.defaultProps);
     const className = classNames('p-inputswitch p-component', {

components/lib/knob/Knob.js

@@ -9,7 +9,7 @@ const minRadians = 4 * Math.PI / 3;
 const maxRadians = -Math.PI / 3;
 
 export const Knob = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const enabled = !props.disabled && !props.readOnly;
 
     const [bindWindowMouseMoveListener, unbindWindowMouseMoveListener] = useEventListener({
@@ -130,6 +130,10 @@ export const Knob = React.memo(React.forwardRef((props, ref) => {
         unbindWindowTouchEndListener();
     }
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const otherProps = ObjectUtils.findDiffKeys(props, Knob.defaultProps);
     const className = classNames('p-knob p-component', {
         'p-disabled': props.disabled,

components/lib/listbox/ListBox.js

@@ -9,7 +9,7 @@ import { ListBoxItem } from './ListBoxItem';
 
 export const ListBox = React.memo(React.forwardRef((props, ref) => {
     const [filterValueState, setFilterValueState] = React.useState('');
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const virtualScrollerRef = React.useRef(null);
     const optionTouched = React.useRef(false);
     const filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || '';
@@ -254,6 +254,10 @@ export const ListBox = React.memo(React.forwardRef((props, ref) => {
         scrollToSelectedIndex();
     });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const createHeader = () => {
         return props.filter ? <ListBoxHeader filter={filteredValue} onFilter={onFilter} disabled={props.disabled} filterPlaceholder={props.filterPlaceholder} filterInputProps={props.filterInputProps} /> : null;
     }

components/lib/multiselect/MultiSelect.js

@@ -10,7 +10,7 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
     const [filterState, setFilterState] = React.useState('');
     const [focusedState, setFocusedState] = React.useState(false);
     const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const inputRef = React.useRef(props.inputRef);
     const labelRef = React.useRef(null);
     const overlayRef = React.useRef(null);
@@ -504,6 +504,10 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     useUpdateEffect(() => {
         if (overlayVisibleState && hasFilter) {
             alignOverlay();

components/lib/multistatecheckbox/MultiStateCheckbox.js

@@ -6,7 +6,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const MultiStateCheckbox = React.memo(React.forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = React.useState(false);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const equalityKey = props.optionValue ? null : props.dataKey;
 
     const onClick = (event) => {
@@ -82,6 +82,10 @@ export const MultiStateCheckbox = React.memo(React.forwardRef((props, ref) => {
         }
     });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const createIcon = () => {
         const icon = (selectedOption && selectedOption.icon) || '';
         const className = classNames('p-checkbox-icon p-c', {

components/lib/orderlist/OrderList.js

@@ -6,7 +6,7 @@ import { OrderListSubList } from './OrderListSubList';
 
 export const OrderList = React.memo(React.forwardRef((props, ref) => {
     const [selectionState, setSelectionState] = React.useState([]);
-    const elementRef = React.useRef(null);
+    const elementRef = React.useRef(ref);
     const reorderDirection = React.useRef(null);
 
     const onItemClick = (event) => {
@@ -110,6 +110,10 @@ export const OrderList = React.memo(React.forwardRef((props, ref) => {
         }
     });
 
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
     const otherProps = ObjectUtils.findDiffKeys(props, OrderList.defaultProps);
     const className = classNames('p-orderlist p-component', props.className);