From 2cdcd1fb07281a33129c8fdb4f90d333d3937d33 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Tue, 26 Jul 2022 08:33:17 -0400
Subject: [PATCH] Fix #3107: ImperativeHandle put props first

---
 components/lib/accordion/Accordion.js                   | 4 ++--
 components/lib/autocomplete/AutoComplete.js             | 4 ++--
 components/lib/avatar/Avatar.js                         | 4 ++--
 components/lib/avatargroup/AvatarGroup.js               | 4 ++--
 components/lib/badge/Badge.js                           | 4 ++--
 components/lib/blockui/BlockUI.js                       | 4 ++--
 components/lib/breadcrumb/BreadCrumb.js                 | 4 ++--
 components/lib/calendar/Calendar.js                     | 4 ++--
 components/lib/captcha/Captcha.js                       | 4 ++--
 components/lib/carousel/Carousel.js                     | 4 ++--
 components/lib/cascadeselect/CascadeSelect.js           | 4 ++--
 components/lib/chart/Chart.js                           | 4 ++--
 components/lib/checkbox/Checkbox.js                     | 4 ++--
 components/lib/chip/Chip.js                             | 4 ++--
 components/lib/chips/Chips.js                           | 4 ++--
 components/lib/colorpicker/ColorPicker.js               | 4 ++--
 components/lib/confirmdialog/ConfirmDialog.js           | 4 ++--
 components/lib/confirmpopup/ConfirmPopup.js             | 4 ++--
 components/lib/contextmenu/ContextMenu.js               | 4 ++--
 components/lib/datascroller/DataScroller.js             | 4 ++--
 components/lib/datatable/DataTable.js                   | 4 ++--
 components/lib/dataview/DataView.js                     | 4 ++--
 components/lib/deferredcontent/DeferredContent.js       | 4 ++--
 components/lib/dialog/Dialog.js                         | 4 ++--
 components/lib/divider/Divider.js                       | 4 ++--
 components/lib/dock/Dock.js                             | 4 ++--
 components/lib/dropdown/Dropdown.js                     | 4 ++--
 components/lib/editor/Editor.js                         | 4 ++--
 components/lib/fieldset/Fieldset.js                     | 4 ++--
 components/lib/fileupload/FileUpload.js                 | 4 ++--
 components/lib/fullcalendar/FullCalendar.js             | 4 ++--
 components/lib/galleria/Galleria.js                     | 4 ++--
 components/lib/gmap/GMap.js                             | 4 ++--
 components/lib/image/Image.js                           | 4 ++--
 components/lib/inplace/Inplace.js                       | 4 ++--
 components/lib/inputmask/InputMask.js                   | 4 ++--
 components/lib/inputnumber/InputNumber.js               | 4 ++--
 components/lib/inputswitch/InputSwitch.js               | 4 ++--
 components/lib/knob/Knob.js                             | 4 ++--
 components/lib/listbox/ListBox.js                       | 4 ++--
 components/lib/megamenu/MegaMenu.js                     | 4 ++--
 components/lib/mention/Mention.js                       | 4 ++--
 components/lib/menu/Menu.js                             | 4 ++--
 components/lib/menubar/Menubar.js                       | 4 ++--
 components/lib/message/Message.js                       | 4 ++--
 components/lib/messages/Messages.js                     | 4 ++--
 components/lib/multiselect/MultiSelect.js               | 4 ++--
 components/lib/multistatecheckbox/MultiStateCheckbox.js | 4 ++--
 components/lib/orderlist/OrderList.js                   | 4 ++--
 components/lib/organizationchart/OrganizationChart.js   | 4 ++--
 components/lib/overlaypanel/OverlayPanel.js             | 4 ++--
 components/lib/paginator/Paginator.js                   | 4 ++--
 components/lib/panel/Panel.js                           | 4 ++--
 components/lib/panelmenu/PanelMenu.js                   | 4 ++--
 components/lib/password/Password.js                     | 4 ++--
 components/lib/picklist/PickList.js                     | 4 ++--
 components/lib/progressbar/ProgressBar.js               | 4 ++--
 components/lib/progressspinner/ProgressSpinner.js       | 4 ++--
 components/lib/radiobutton/RadioButton.js               | 4 ++--
 components/lib/rating/Rating.js                         | 4 ++--
 components/lib/scrollpanel/ScrollPanel.js               | 4 ++--
 components/lib/scrolltop/ScrollTop.js                   | 4 ++--
 components/lib/selectbutton/SelectButton.js             | 4 ++--
 components/lib/sidebar/Sidebar.js                       | 2 +-
 components/lib/skeleton/Skeleton.js                     | 4 ++--
 components/lib/slidemenu/SlideMenu.js                   | 4 ++--
 components/lib/slider/Slider.js                         | 4 ++--
 components/lib/speeddial/SpeedDial.js                   | 4 ++--
 components/lib/splitbutton/SplitButton.js               | 4 ++--
 components/lib/splitter/Splitter.js                     | 4 ++--
 components/lib/steps/Steps.js                           | 4 ++--
 components/lib/styleclass/StyleClass.js                 | 4 ++--
 components/lib/tabmenu/TabMenu.js                       | 4 ++--
 components/lib/tabview/TabView.js                       | 4 ++--
 components/lib/tag/Tag.js                               | 4 ++--
 components/lib/terminal/Terminal.js                     | 4 ++--
 components/lib/tieredmenu/TieredMenu.js                 | 4 ++--
 components/lib/timeline/Timeline.js                     | 4 ++--
 components/lib/toast/Toast.js                           | 4 ++--
 components/lib/togglebutton/ToggleButton.js             | 4 ++--
 components/lib/toolbar/Toolbar.js                       | 4 ++--
 components/lib/tooltip/Tooltip.js                       | 4 ++--
 components/lib/tree/Tree.js                             | 4 ++--
 components/lib/treeselect/TreeSelect.js                 | 4 ++--
 components/lib/treetable/TreeTable.js                   | 4 ++--
 components/lib/tristatecheckbox/TriStateCheckbox.js     | 4 ++--
 components/lib/virtualscroller/VirtualScroller.js       | 4 ++--
 87 files changed, 173 insertions(+), 173 deletions(-)

diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js
index 2cb976eb25..3ad9f5315f 100644
--- a/components/lib/accordion/Accordion.js
+++ b/components/lib/accordion/Accordion.js
@@ -48,8 +48,8 @@ export const Accordion = React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     useMountEffect(() => {
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index 0c5acbb3ac..c62d846940 100644
--- a/components/lib/autocomplete/AutoComplete.js
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -454,12 +454,12 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         search,
         getElement: () => elementRef.current,
         getOverlay: () => overlayRef.current,
         getInput: () => inputRef.current,
-        getVirtualScroller: () => virtualScrollerRef.current,
-        ...props
+        getVirtualScroller: () => virtualScrollerRef.current
     }));
 
     const createSimpleAutoComplete = () => {
diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js
index 1af08d0207..bc75b4e716 100644
--- a/components/lib/avatar/Avatar.js
+++ b/components/lib/avatar/Avatar.js
@@ -19,8 +19,8 @@ export const Avatar = React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, Avatar.defaultProps);
diff --git a/components/lib/avatargroup/AvatarGroup.js b/components/lib/avatargroup/AvatarGroup.js
index 0bcc00b03b..73b8247de5 100644
--- a/components/lib/avatargroup/AvatarGroup.js
+++ b/components/lib/avatargroup/AvatarGroup.js
@@ -7,8 +7,8 @@ export const AvatarGroup = React.forwardRef((props, ref) => {
     const className = classNames('p-avatar-group p-component', props.className);
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     return (
diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js
index c6b8e84409..7499f9e688 100644
--- a/components/lib/badge/Badge.js
+++ b/components/lib/badge/Badge.js
@@ -13,8 +13,8 @@ export const Badge = React.memo(React.forwardRef((props, ref) => {
     }, props.className);
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     return (
diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js
index 488ad5de6b..853a4e28a4 100644
--- a/components/lib/blockui/BlockUI.js
+++ b/components/lib/blockui/BlockUI.js
@@ -64,10 +64,10 @@ export const BlockUI = React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         block,
         unblock,
-        getElement: () => elementRef.current,
-        ...props
+        getElement: () => elementRef.current
     }));
 
     const createMask = () => {
diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
index a085b0327e..b85b5a4a2f 100644
--- a/components/lib/breadcrumb/BreadCrumb.js
+++ b/components/lib/breadcrumb/BreadCrumb.js
@@ -112,8 +112,8 @@ export const BreadCrumb = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, BreadCrumb.defaultProps);
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index ddaeac913c..c927e12da1 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -2486,6 +2486,7 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         show,
         hide,
         getCurrentDateTime,
@@ -2493,8 +2494,7 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
         updateViewDate,
         getElement: () => elementRef.current,
         getOverlay: () => overlayRef.current,
-        getInput: () => inputRef.current,
-        ...props
+        getInput: () => inputRef.current
     }));
 
     const createBackwardNavigator = (isVisible) => {
diff --git a/components/lib/captcha/Captcha.js b/components/lib/captcha/Captcha.js
index f6393dd157..904cb9542a 100644
--- a/components/lib/captcha/Captcha.js
+++ b/components/lib/captcha/Captcha.js
@@ -81,10 +81,10 @@ export const Captcha = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         reset,
         getResponse,
-        getElement: () => elementRef.current,
-        ...props
+        getElement: () => elementRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, Captcha.defaultProps);
diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
index dd4e8adbe9..5e68260417 100644
--- a/components/lib/carousel/Carousel.js
+++ b/components/lib/carousel/Carousel.js
@@ -287,8 +287,8 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     useMountEffect(() => {
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
index ea670ddfe8..4df9a41a34 100644
--- a/components/lib/cascadeselect/CascadeSelect.js
+++ b/components/lib/cascadeselect/CascadeSelect.js
@@ -183,11 +183,11 @@ export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getElement: () => elementRef.current,
         getOverlay: () => overlayRef.current,
         getInput: () => inputRef.current,
-        getLabel: () => labelRef.current,
-        ...props
+        getLabel: () => labelRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js
index 224ce00645..b8dad4c0de 100644
--- a/components/lib/chart/Chart.js
+++ b/components/lib/chart/Chart.js
@@ -47,13 +47,13 @@ const PrimeReactChart = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getCanvas: () => canvasRef.current,
         getChart: () => chartRef.current,
         getBase64Image: () => chartRef.current.toBase64Image(),
         getElement: () => elementRef.current,
         generateLegend: () => chartRef.current && chartRef.current.generateLegend(),
-        refresh: () => chartRef.current && chartRef.current.update(),
-        ...props
+        refresh: () => chartRef.current && chartRef.current.update()
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
index bd0f4ea28e..6e1c3a0911 100644
--- a/components/lib/checkbox/Checkbox.js
+++ b/components/lib/checkbox/Checkbox.js
@@ -47,9 +47,9 @@ export const Checkbox = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getElement: () => elementRef.current,
-        getInput: () => inputRef.current,
-        ...props
+        getInput: () => inputRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
index b2eeabcb86..2981d52001 100644
--- a/components/lib/chip/Chip.js
+++ b/components/lib/chip/Chip.js
@@ -56,8 +56,8 @@ export const Chip = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     return visibleState && createElement();
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index c2eeaf6d5f..d1f28fa8d9 100644
--- a/components/lib/chips/Chips.js
+++ b/components/lib/chips/Chips.js
@@ -178,9 +178,9 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getElement: () => elementRef.current,
-        getInput: () => inputRef.current,
-        ...props
+        getInput: () => inputRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js
index 98f7a46734..0c536b3829 100644
--- a/components/lib/colorpicker/ColorPicker.js
+++ b/components/lib/colorpicker/ColorPicker.js
@@ -438,12 +438,12 @@ export const ColorPicker = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         show,
         hide,
         getElement: () => elementRef.current,
         getOverlay: () => overlayRef.current,
-        getInput: () => inputRef.current,
-        ...props
+        getInput: () => inputRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js
index 95f6dfa13c..cd26641376 100644
--- a/components/lib/confirmdialog/ConfirmDialog.js
+++ b/components/lib/confirmdialog/ConfirmDialog.js
@@ -94,8 +94,8 @@ export const ConfirmDialog = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
-        confirm,
-        ...props
+        ...props,
+        confirm
     }));
 
     const createFooter = () => {
diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js
index 0e81842caf..c9f131e89e 100644
--- a/components/lib/confirmpopup/ConfirmPopup.js
+++ b/components/lib/confirmpopup/ConfirmPopup.js
@@ -179,8 +179,8 @@ export const ConfirmPopup = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
-        confirm,
-        ...props
+        ...props,
+        confirm
     }));
 
     const createContent = () => {
diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
index 3a304c4c1a..a91c85ce94 100644
--- a/components/lib/contextmenu/ContextMenu.js
+++ b/components/lib/contextmenu/ContextMenu.js
@@ -164,10 +164,10 @@ export const ContextMenu = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         show,
         hide,
-        getElement: () => menuRef.current,
-        ...props
+        getElement: () => menuRef.current
     }));
 
     const createContextMenu = () => {
diff --git a/components/lib/datascroller/DataScroller.js b/components/lib/datascroller/DataScroller.js
index 09c8685d11..6f13a34a41 100644
--- a/components/lib/datascroller/DataScroller.js
+++ b/components/lib/datascroller/DataScroller.js
@@ -142,11 +142,11 @@ export const DataScroller = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         load,
         reset,
         getElement: () => elementRef.current,
-        getContent: () => contentRef.current,
-        ...props
+        getContent: () => contentRef.current
     }));
 
     const createHeader = () => {
diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
index 7a827b98bb..371bc6a54f 100644
--- a/components/lib/datatable/DataTable.js
+++ b/components/lib/datatable/DataTable.js
@@ -1324,6 +1324,7 @@ export const DataTable = React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         reset,
         resetScroll,
         exportCSV,
@@ -1334,8 +1335,7 @@ export const DataTable = React.forwardRef((props, ref) => {
         clearState,
         getElement: () => elementRef.current,
         getTable: () => tableRef.current,
-        getVirtualScroller: () => virtualScrollerRef.current,
-        ...props
+        getVirtualScroller: () => virtualScrollerRef.current
     }));
 
     const createLoader = () => {
diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js
index 2f3cacc407..b2308efe70 100644
--- a/components/lib/dataview/DataView.js
+++ b/components/lib/dataview/DataView.js
@@ -197,8 +197,8 @@ export const DataView = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const data = processData();
diff --git a/components/lib/deferredcontent/DeferredContent.js b/components/lib/deferredcontent/DeferredContent.js
index bec870f19a..2c1078e747 100644
--- a/components/lib/deferredcontent/DeferredContent.js
+++ b/components/lib/deferredcontent/DeferredContent.js
@@ -33,8 +33,8 @@ export const DeferredContent = React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     useMountEffect(() => {
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
index 3df545697d..81cc6acad2 100644
--- a/components/lib/dialog/Dialog.js
+++ b/components/lib/dialog/Dialog.js
@@ -399,14 +399,14 @@ export const Dialog = React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         resetPosition,
         getElement: () => dialogRef.current,
         getMask: () => maskRef.current,
         getContent: () => contentRef.current,
         getHeader: () => headerRef.current,
         getFooter: () => footerRef.current,
-        getCloseButton: () => closeRef.current,
-        ...props
+        getCloseButton: () => closeRef.current
     }));
 
     const createCloseIcon = () => {
diff --git a/components/lib/divider/Divider.js b/components/lib/divider/Divider.js
index 4325788e4f..9a235668a9 100644
--- a/components/lib/divider/Divider.js
+++ b/components/lib/divider/Divider.js
@@ -15,8 +15,8 @@ export const Divider = React.forwardRef((props, ref) => {
     }, props.className);
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     return (
diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js
index cac2c1a2b7..15919cab90 100644
--- a/components/lib/dock/Dock.js
+++ b/components/lib/dock/Dock.js
@@ -103,8 +103,8 @@ export const Dock = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, Dock.defaultProps);
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index a7f6085e7c..942bf62b15 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -552,13 +552,13 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         show,
         hide,
         getElement: () => elementRef.current,
         getOverlay: () => overlayRef.current,
         getInput: () => inputRef.current,
-        getFocusInput: () => focusInputRef.current,
-        ...props
+        getFocusInput: () => focusInputRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js
index 072ed69956..72a01e9b9d 100644
--- a/components/lib/editor/Editor.js
+++ b/components/lib/editor/Editor.js
@@ -111,11 +111,11 @@ export const Editor = React.memo(React.forwardRef((props, ref) => {
     }, [props.value]);
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getQuill: () => quill.current,
         getElement: () => elementRef.current,
         getContent: () => contentRef.current,
-        getToolbar: () => toolbarRef.current,
-        ...props
+        getToolbar: () => toolbarRef.current
     }));
 
     const createToolbarHeader = () => {
diff --git a/components/lib/fieldset/Fieldset.js b/components/lib/fieldset/Fieldset.js
index 071cd07cea..fab96c226e 100644
--- a/components/lib/fieldset/Fieldset.js
+++ b/components/lib/fieldset/Fieldset.js
@@ -104,9 +104,9 @@ export const Fieldset = React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getElement: () => elementRef.current,
-        getContent: () => contentRef.current,
-        ...props
+        getContent: () => contentRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, Fieldset.defaultProps);
diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
index fc69a99ba0..8e8463ab03 100644
--- a/components/lib/fileupload/FileUpload.js
+++ b/components/lib/fileupload/FileUpload.js
@@ -313,12 +313,12 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         upload,
         clear,
         formatSize,
         getInput: () => fileInputRef.current,
-        getContent: () => contentRef.current,
-        ...props
+        getContent: () => contentRef.current
     }));
 
     const createChooseButton = () => {
diff --git a/components/lib/fullcalendar/FullCalendar.js b/components/lib/fullcalendar/FullCalendar.js
index e4626836cf..0b4467ae3a 100644
--- a/components/lib/fullcalendar/FullCalendar.js
+++ b/components/lib/fullcalendar/FullCalendar.js
@@ -24,8 +24,8 @@ export const FullCalendar = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     useMountEffect(() => {
diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js
index 05d35b78e2..195d19c331 100644
--- a/components/lib/galleria/Galleria.js
+++ b/components/lib/galleria/Galleria.js
@@ -102,14 +102,14 @@ export const Galleria = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         show,
         hide,
         isAutoPlayActive,
         startSlideShow,
         stopSlideShow,
         getElement: () => elementRef.current,
-        getPreviewContent: () => previewContentRef.current,
-        ...props
+        getPreviewContent: () => previewContentRef.current
     }));
 
     const createHeader = () => {
diff --git a/components/lib/gmap/GMap.js b/components/lib/gmap/GMap.js
index c4e102eda5..d3b412e5f9 100644
--- a/components/lib/gmap/GMap.js
+++ b/components/lib/gmap/GMap.js
@@ -111,9 +111,9 @@ export const GMap = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getMap,
-        getElement: () => elementRef.current,
-        ...props
+        getElement: () => elementRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, GMap.defaultProps);
diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
index c7c210d491..07f7123fe7 100644
--- a/components/lib/image/Image.js
+++ b/components/lib/image/Image.js
@@ -146,9 +146,9 @@ export const Image = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getElement: () => elementRef.current,
-        getImage: () => imageRef.current,
-        ...props
+        getImage: () => imageRef.current
     }));
 
     const { src, alt, width, height } = props;
diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js
index 4ae6d486a8..72d5bb71f1 100644
--- a/components/lib/inplace/Inplace.js
+++ b/components/lib/inplace/Inplace.js
@@ -99,8 +99,8 @@ export const Inplace = React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, Inplace.defaultProps);
diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js
index 34e0430a79..537c080f2e 100644
--- a/components/lib/inputmask/InputMask.js
+++ b/components/lib/inputmask/InputMask.js
@@ -506,8 +506,8 @@ export const InputMask = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index de545499e9..da5bb3716f 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -934,10 +934,10 @@ export const InputNumber = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getFormatter,
         getElement: () => elementRef.current,
-        getInput: () => elementRef.current,
-        ...props
+        getInput: () => elementRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js
index fdbe715c7e..1385c91d62 100644
--- a/components/lib/inputswitch/InputSwitch.js
+++ b/components/lib/inputswitch/InputSwitch.js
@@ -48,9 +48,9 @@ export const InputSwitch = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getElement: () => elementRef.current,
-        getInput: () => elementRef.current,
-        ...props
+        getInput: () => elementRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js
index 2a6ada1ea4..c66291bbca 100644
--- a/components/lib/knob/Knob.js
+++ b/components/lib/knob/Knob.js
@@ -131,8 +131,8 @@ export const Knob = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, Knob.defaultProps);
diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
index 67964a98b1..ac28c06e58 100644
--- a/components/lib/listbox/ListBox.js
+++ b/components/lib/listbox/ListBox.js
@@ -256,9 +256,9 @@ export const ListBox = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getElement: () => elementRef.current,
-        getVirtualScroller: () => virtualScrollerRef.current,
-        ...props
+        getVirtualScroller: () => virtualScrollerRef.current
     }));
 
     useMountEffect(() => {
diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js
index ccb3343ae0..b8af9e8142 100644
--- a/components/lib/megamenu/MegaMenu.js
+++ b/components/lib/megamenu/MegaMenu.js
@@ -168,8 +168,8 @@ export const MegaMenu = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     useMountEffect(() => {
diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js
index acd8aa36c4..33bcec47ae 100644
--- a/components/lib/mention/Mention.js
+++ b/components/lib/mention/Mention.js
@@ -313,12 +313,12 @@ export const Mention = React.memo(React.forwardRef((props, ref) => {
     ), [props.value, props.defaultValue, inputRef]);
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         show,
         hide,
         getElement: () => elementRef.current,
         getOverlay: () => overlayRef.current,
-        getInput: () => inputRef.current,
-        ...props
+        getInput: () => inputRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
index 92aae8c342..7191397bd6 100644
--- a/components/lib/menu/Menu.js
+++ b/components/lib/menu/Menu.js
@@ -122,12 +122,12 @@ export const Menu = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         toggle,
         show,
         hide,
         getElement: () => menuRef.current,
-        getTarget: () => targetRef.current,
-        ...props
+        getTarget: () => targetRef.current
     }));
 
     const createSubmenu = (submenu, index) => {
diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js
index 8d4ef42809..2089d3c14d 100644
--- a/components/lib/menubar/Menubar.js
+++ b/components/lib/menubar/Menubar.js
@@ -49,12 +49,12 @@ export const Menubar = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         toggle,
         useCustomContent,
         getElement: () => elementRef.current,
         getRootMenu: () => rootMenuRef.current,
-        getMenuButton: () => menuButtonRef.current,
-        ...props
+        getMenuButton: () => menuButtonRef.current
     }));
 
     const createStartContent = () => {
diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js
index c83e50f9ce..378f5d2225 100644
--- a/components/lib/message/Message.js
+++ b/components/lib/message/Message.js
@@ -26,8 +26,8 @@ export const Message = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, Message.defaultProps);
diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js
index bfb49a5f5c..90f21abe8e 100644
--- a/components/lib/messages/Messages.js
+++ b/components/lib/messages/Messages.js
@@ -44,11 +44,11 @@ export const Messages = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         show,
         replace,
         clear,
-        getElement: () => elementRef.current,
-        ...props
+        getElement: () => elementRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, Messages.defaultProps);
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index e4f5654b34..4ad65a3be7 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -500,12 +500,12 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         show,
         hide,
         getElement: () => elementRef.current,
         getOverlay: () => overlayRef.current,
-        getInput: () => inputRef.current,
-        ...props
+        getInput: () => inputRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
index ad4283e08f..2285f4c04b 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckbox.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -77,8 +77,8 @@ export const MultiStateCheckbox = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     useMountEffect(() => {
diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
index 75946681ba..0e7a697df9 100644
--- a/components/lib/orderlist/OrderList.js
+++ b/components/lib/orderlist/OrderList.js
@@ -147,8 +147,8 @@ export const OrderList = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     useUpdateEffect(() => {
diff --git a/components/lib/organizationchart/OrganizationChart.js b/components/lib/organizationchart/OrganizationChart.js
index cf5bedcec9..5d80110362 100644
--- a/components/lib/organizationchart/OrganizationChart.js
+++ b/components/lib/organizationchart/OrganizationChart.js
@@ -63,8 +63,8 @@ export const OrganizationChart = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, OrganizationChart.defaultProps);
diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
index ed106982d1..20a43f10ed 100644
--- a/components/lib/overlaypanel/OverlayPanel.js
+++ b/components/lib/overlaypanel/OverlayPanel.js
@@ -174,11 +174,11 @@ export const OverlayPanel = React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         toggle,
         show,
         hide,
-        getElement: () => overlayRef.current,
-        ...props
+        getElement: () => overlayRef.current
     }));
 
     const createCloseIcon = () => {
diff --git a/components/lib/paginator/Paginator.js b/components/lib/paginator/Paginator.js
index 6e734832b7..e9e1db38db 100644
--- a/components/lib/paginator/Paginator.js
+++ b/components/lib/paginator/Paginator.js
@@ -97,8 +97,8 @@ export const Paginator = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     useUpdateEffect(() => {
diff --git a/components/lib/panel/Panel.js b/components/lib/panel/Panel.js
index 8f696d20e8..f334e22617 100644
--- a/components/lib/panel/Panel.js
+++ b/components/lib/panel/Panel.js
@@ -45,9 +45,9 @@ export const Panel = React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getElement: () => elementRef.current,
-        getContent: () => contentRef.current,
-        ...props
+        getContent: () => contentRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
index 27e096daca..cab8893233 100644
--- a/components/lib/panelmenu/PanelMenu.js
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -74,8 +74,8 @@ export const PanelMenu = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     useMountEffect(() => {
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
index ef06e67184..4788d37406 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -209,10 +209,10 @@ export const Password = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getElement: () => elementRef.current,
         getOverlay: () => overlayRef.current,
-        getInput: () => inputRef.current,
-        ...props
+        getInput: () => inputRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
index b676cb90fb..39c6b8d59b 100644
--- a/components/lib/picklist/PickList.js
+++ b/components/lib/picklist/PickList.js
@@ -183,8 +183,8 @@ export const PickList = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     useUpdateEffect(() => {
diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js
index 6737c94997..fb89f409ea 100644
--- a/components/lib/progressbar/ProgressBar.js
+++ b/components/lib/progressbar/ProgressBar.js
@@ -40,8 +40,8 @@ export const ProgressBar = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     if (props.mode === 'determinate')
diff --git a/components/lib/progressspinner/ProgressSpinner.js b/components/lib/progressspinner/ProgressSpinner.js
index b01c1a054f..f7e094f4f3 100644
--- a/components/lib/progressspinner/ProgressSpinner.js
+++ b/components/lib/progressspinner/ProgressSpinner.js
@@ -7,8 +7,8 @@ export const ProgressSpinner = React.memo(React.forwardRef((props, ref) => {
     const className = classNames('p-progress-spinner', props.className);
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     return (
diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
index ff2bf24f71..c90ffc18a3 100644
--- a/components/lib/radiobutton/RadioButton.js
+++ b/components/lib/radiobutton/RadioButton.js
@@ -53,10 +53,10 @@ export const RadioButton = React.memo(React.forwardRef((props, ref) => {
     }, [inputRef, props.inputRef]);
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         select,
         getElement: () => elementRef.current,
-        getInput: () => inputRef.current,
-        ...props
+        getInput: () => inputRef.current
     }));
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js
index 890e772bc1..a7e612335b 100644
--- a/components/lib/rating/Rating.js
+++ b/components/lib/rating/Rating.js
@@ -77,8 +77,8 @@ export const Rating = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js
index 31da721b50..9079aafc36 100644
--- a/components/lib/scrollpanel/ScrollPanel.js
+++ b/components/lib/scrollpanel/ScrollPanel.js
@@ -149,12 +149,12 @@ export const ScrollPanel = React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         refresh,
         getElement: () => containerRef.current,
         getContent: () => contentRef.current,
         getXBar: () => xBarRef.current,
-        getYBar: () => yBarRef.current,
-        ...props
+        getYBar: () => yBarRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, ScrollPanel.defaultProps);
diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js
index 039b605748..b6d4c9af00 100644
--- a/components/lib/scrolltop/ScrollTop.js
+++ b/components/lib/scrolltop/ScrollTop.js
@@ -50,8 +50,8 @@ export const ScrollTop = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => scrollElementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     useMountEffect(() => {
diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
index 122ae1cd56..92a56c2018 100644
--- a/components/lib/selectbutton/SelectButton.js
+++ b/components/lib/selectbutton/SelectButton.js
@@ -91,8 +91,8 @@ export const SelectButton = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
index 9af0831106..dffc0a02f7 100644
--- a/components/lib/sidebar/Sidebar.js
+++ b/components/lib/sidebar/Sidebar.js
@@ -86,10 +86,10 @@ export const Sidebar = React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getElement: () => sidebarRef.current,
         gteMask: () => maskRef.current,
         getCloseIcon: () => closeIconRef.current,
-        ...props
     }));
 
     useMountEffect(() => {
diff --git a/components/lib/skeleton/Skeleton.js b/components/lib/skeleton/Skeleton.js
index 80cebc69e9..e7495288e5 100644
--- a/components/lib/skeleton/Skeleton.js
+++ b/components/lib/skeleton/Skeleton.js
@@ -13,8 +13,8 @@ export const Skeleton = React.memo(React.forwardRef((props, ref) => {
     }, props.className);
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     return <div ref={elementRef} style={style} className={className} {...otherProps}></div>
diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js
index eca98d65a3..b4ee67dcda 100644
--- a/components/lib/slidemenu/SlideMenu.js
+++ b/components/lib/slidemenu/SlideMenu.js
@@ -86,11 +86,11 @@ export const SlideMenu = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         toggle,
         show,
         hide,
-        getElement: () => menuRef.current,
-        ...props
+        getElement: () => menuRef.current
     }));
 
     const createBackward = () => {
diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js
index 675f1b835f..d9b97fce45 100644
--- a/components/lib/slider/Slider.js
+++ b/components/lib/slider/Slider.js
@@ -244,8 +244,8 @@ export const Slider = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, Slider.defaultProps);
diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
index 4675211a9a..a274b2c294 100644
--- a/components/lib/speeddial/SpeedDial.js
+++ b/components/lib/speeddial/SpeedDial.js
@@ -146,10 +146,10 @@ export const SpeedDial = React.memo(React.forwardRef((props, ref) => {
     }, [visibleState]);
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         show,
         hide,
-        getElement: () => elementRef.current,
-        ...props
+        getElement: () => elementRef.current
     }));
 
     const createItem = (item, index) => {
diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js
index b56e5e842e..49197f8606 100644
--- a/components/lib/splitbutton/SplitButton.js
+++ b/components/lib/splitbutton/SplitButton.js
@@ -80,10 +80,10 @@ export const SplitButton = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         show,
         hide,
-        getElement: () => elementRef.current,
-        ...props
+        getElement: () => elementRef.current
     }));
 
     const createItems = () => {
diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js
index 7dfc079829..e9f37cacd8 100644
--- a/components/lib/splitter/Splitter.js
+++ b/components/lib/splitter/Splitter.js
@@ -172,8 +172,8 @@ export const Splitter = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js
index 67e97846bb..8b0997f516 100644
--- a/components/lib/steps/Steps.js
+++ b/components/lib/steps/Steps.js
@@ -90,8 +90,8 @@ export const Steps = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, Steps.defaultProps);
diff --git a/components/lib/styleclass/StyleClass.js b/components/lib/styleclass/StyleClass.js
index e4ff292047..e0135eff02 100644
--- a/components/lib/styleclass/StyleClass.js
+++ b/components/lib/styleclass/StyleClass.js
@@ -164,9 +164,9 @@ export const StyleClass = React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getElement: () => elementRef.current,
-        getTarget: () => targetRef.current,
-        ...props
+        getTarget: () => targetRef.current
     }));
 
     useMountEffect(() => {
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
index de215e6b0c..6a77e7b60a 100644
--- a/components/lib/tabmenu/TabMenu.js
+++ b/components/lib/tabmenu/TabMenu.js
@@ -51,8 +51,8 @@ export const TabMenu = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js
index fc8531ccca..e035b02433 100644
--- a/components/lib/tabview/TabView.js
+++ b/components/lib/tabview/TabView.js
@@ -147,9 +147,9 @@ export const TabView = React.forwardRef((props, ref) => {
     }, [props.activeIndex]);
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         reset,
-        getElement: () => elementRef.current,
-        ...props
+        getElement: () => elementRef.current
     }));
 
     const createTabHeader = (tab, index) => {
diff --git a/components/lib/tag/Tag.js b/components/lib/tag/Tag.js
index b88adc2d04..bb70b0f49e 100644
--- a/components/lib/tag/Tag.js
+++ b/components/lib/tag/Tag.js
@@ -11,8 +11,8 @@ export const Tag = React.forwardRef((props, ref) => {
     const icon = IconUtils.getJSXIcon(props.icon, { className: 'p-tag-icon' }, { props });
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     return (
diff --git a/components/lib/terminal/Terminal.js b/components/lib/terminal/Terminal.js
index a0673b0366..7796ef569a 100644
--- a/components/lib/terminal/Terminal.js
+++ b/components/lib/terminal/Terminal.js
@@ -55,8 +55,8 @@ export const Terminal = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     React.useEffect(() => {
diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
index d1c65f95b2..b4dfe7de23 100644
--- a/components/lib/tieredmenu/TieredMenu.js
+++ b/components/lib/tieredmenu/TieredMenu.js
@@ -71,11 +71,11 @@ export const TieredMenu = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         toggle,
         show,
         hide,
-        getElement: () => menuRef.current,
-        ...props
+        getElement: () => menuRef.current
     }));
 
     const createElement = () => {
diff --git a/components/lib/timeline/Timeline.js b/components/lib/timeline/Timeline.js
index d916688f03..4752c96627 100644
--- a/components/lib/timeline/Timeline.js
+++ b/components/lib/timeline/Timeline.js
@@ -33,8 +33,8 @@ export const Timeline = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, Timeline.defaultProps);
diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js
index db26b4aac7..fb623f8d47 100644
--- a/components/lib/toast/Toast.js
+++ b/components/lib/toast/Toast.js
@@ -66,11 +66,11 @@ export const Toast = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         show,
         replace,
         clear,
-        getElement: () => containerRef.current,
-        ...props
+        getElement: () => containerRef.current
     }));
 
     const createElement = () => {
diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js
index 04bc2edbb7..588f85a09d 100644
--- a/components/lib/togglebutton/ToggleButton.js
+++ b/components/lib/togglebutton/ToggleButton.js
@@ -47,8 +47,8 @@ export const ToggleButton = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
diff --git a/components/lib/toolbar/Toolbar.js b/components/lib/toolbar/Toolbar.js
index db59bc7f7f..8672c150b4 100644
--- a/components/lib/toolbar/Toolbar.js
+++ b/components/lib/toolbar/Toolbar.js
@@ -9,8 +9,8 @@ export const Toolbar = React.memo(React.forwardRef((props, ref) => {
     const right = ObjectUtils.getJSXElement(props.right, props);
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     return (
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index a9fd63d43a..6637fe03c2 100644
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -437,12 +437,12 @@ export const Tooltip = React.memo(React.forwardRef((props, ref) => {
     });
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         updateTargetEvents,
         loadTargetEvents,
         unloadTargetEvents,
         getElement: () => elementRef.current,
-        getTarget: () => currentTargetRef.current,
-        ...props
+        getTarget: () => currentTargetRef.current
     }));
 
     const createElement = () => {
diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
index 83bb5a179d..3a3723cdf6 100644
--- a/components/lib/tree/Tree.js
+++ b/components/lib/tree/Tree.js
@@ -295,9 +295,9 @@ export const Tree = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         filter,
-        getElement: () => elementRef.current,
-        ...props
+        getElement: () => elementRef.current
     }));
 
     const createRootChild = (node, index, last) => {
diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js
index 768c55df8a..24b6706408 100644
--- a/components/lib/treeselect/TreeSelect.js
+++ b/components/lib/treeselect/TreeSelect.js
@@ -282,8 +282,8 @@ export const TreeSelect = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     useMountEffect(() => {
diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js
index 05d5177ba9..8466f8cf29 100644
--- a/components/lib/treetable/TreeTable.js
+++ b/components/lib/treetable/TreeTable.js
@@ -791,9 +791,9 @@ export const TreeTable = React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         filter,
-        getElement: () => elementRef.current,
-        ...props
+        getElement: () => elementRef.current
     }));
 
     const createTableHeader = (columns, columnGroup) => {
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index 85d6a77c0e..a3231859b6 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -53,8 +53,8 @@ export const TriStateCheckbox = React.memo(React.forwardRef((props, ref) => {
     }
 
     React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
+        ...props,
+        getElement: () => elementRef.current
     }));
 
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
diff --git a/components/lib/virtualscroller/VirtualScroller.js b/components/lib/virtualscroller/VirtualScroller.js
index a269375e3f..c169355b2b 100644
--- a/components/lib/virtualscroller/VirtualScroller.js
+++ b/components/lib/virtualscroller/VirtualScroller.js
@@ -513,12 +513,12 @@ export const VirtualScroller = React.memo(React.forwardRef((props, ref) => {
     }, [props.orientation]);
 
     React.useImperativeHandle(ref, () => ({
+        ...props,
         getElementRef,
         scrollTo,
         scrollToIndex,
         scrollInView,
-        getRenderedRange,
-        ...props
+        getRenderedRange
     }));
 
     const createLoaderItem = (index, extOptions = {}) => {