From 76cb26fb94e09538cde6034b2a3d44c2839cdfa2 Mon Sep 17 00:00:00 2001
From: davidgolden <david@soprisapps.com>
Date: Tue, 11 Mar 2025 13:23:08 -0600
Subject: [PATCH 1/2] add nodeRef prop to prevent usage of deprecated
 findDOMNode

---
 src/js/components/FontIconPicker.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/js/components/FontIconPicker.jsx b/src/js/components/FontIconPicker.jsx
index 0dee286..8707e97 100644
--- a/src/js/components/FontIconPicker.jsx
+++ b/src/js/components/FontIconPicker.jsx
@@ -481,6 +481,7 @@ class FontIconPicker extends React.PureComponent {
 					onEntered={this.handlePortalEntered}
 					onExit={this.handlePortalExit}
 					onExiting={this.handlePortalExiting}
+					nodeRef={this.fipDropDownRef}
 				>
 					<FipDropDownPortal
 						appendRoot={this.props.appendTo}

From 27a24b8af1a7535830522f2065c1fa9d76aad8a9 Mon Sep 17 00:00:00 2001
From: davidgolden <david@soprisapps.com>
Date: Tue, 11 Mar 2025 16:11:18 -0600
Subject: [PATCH 2/2] make necessary adjustments since onEnter and friends
 don't pass node when nodeRef prop is provided

---
 src/js/components/FipDropDown.jsx    |  3 ++-
 src/js/components/FontIconPicker.jsx | 30 +++++++++++++++-------------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/js/components/FipDropDown.jsx b/src/js/components/FipDropDown.jsx
index 6376650..8567007 100644
--- a/src/js/components/FipDropDown.jsx
+++ b/src/js/components/FipDropDown.jsx
@@ -48,6 +48,7 @@ class FipDropDown extends React.PureComponent {
 		handleChangeCategory: PropTypes.func.isRequired,
 		handleChangePage: PropTypes.func.isRequired,
 		handleChangeSearch: PropTypes.func.isRequired,
+		domRef: PropTypes.object.isRequired, // eslint-disable-line
 	};
 
 	static defaultProps = {
@@ -96,7 +97,7 @@ class FipDropDown extends React.PureComponent {
 
 	render() {
 		return (
-			<div className="rfipdropdown__selector">
+			<div className="rfipdropdown__selector" ref={this.props.domRef}>
 				{this.props.showSearch ? (
 					<FipSearch
 						handleSearch={this.handleSearch}
diff --git a/src/js/components/FontIconPicker.jsx b/src/js/components/FontIconPicker.jsx
index 8707e97..239af21 100644
--- a/src/js/components/FontIconPicker.jsx
+++ b/src/js/components/FontIconPicker.jsx
@@ -170,6 +170,7 @@ class FontIconPicker extends React.PureComponent {
 		// some references we need for outside click
 		this.fipButtonRef = React.createRef();
 		this.fipDropDownRef = React.createRef();
+		this.fipDropDownPortalRef = React.createRef();
 
 		// create the state
 		this.state = {
@@ -236,8 +237,8 @@ class FontIconPicker extends React.PureComponent {
 		}
 		return (
 			this.fipButtonRef.current.contains(target) ||
-			(this.fipDropDownRef.current &&
-				this.fipDropDownRef.current.contains(target))
+			(this.fipDropDownPortalRef.current &&
+				this.fipDropDownPortalRef.current.contains(target))
 		);
 	};
 
@@ -374,8 +375,8 @@ class FontIconPicker extends React.PureComponent {
 		});
 	};
 
-	handlePortalEnter = /* istanbul ignore next */ node => {
-		const selectorNode = node.childNodes[0];
+	handlePortalEnter = /* istanbul ignore next */ () => {
+		const selectorNode = this.fipDropDownRef.current;
 		this.resetPortalStyle(selectorNode);
 		const computedStyle = getComputedStyle(selectorNode);
 		this.fipPortalComputedStyle = {
@@ -387,15 +388,15 @@ class FontIconPicker extends React.PureComponent {
 			selectorNode.style[key] = '0px';
 		});
 	};
-	handlePortalEntering = /* istanbul ignore next */ node => {
-		const selectorNode = node.childNodes[0];
+	handlePortalEntering = /* istanbul ignore next */ () => {
+		const selectorNode = this.fipDropDownRef.current;
 		selectorNode.style.maxHeight = this.fipPortalComputedStyle.height;
 		selectorNode.style.paddingTop = this.fipPortalComputedStyle.paddingTop;
 		selectorNode.style.paddingBottom = this.fipPortalComputedStyle.paddingBottom;
 	};
-	handlePortalEntered = /* istanbul ignore next */ node => {
+	handlePortalEntered = /* istanbul ignore next */ () => {
 		// reset style
-		const selectorNode = node.childNodes[0];
+		const selectorNode = this.fipDropDownRef.current;
 		this.resetPortalStyle(selectorNode);
 		// focus on search
 		// but only if not on mobile devices and search is shown
@@ -407,14 +408,14 @@ class FontIconPicker extends React.PureComponent {
 			selectorNode.querySelector('.rfipsearch__input').focus();
 		}
 	};
-	handlePortalExit = /* istanbul ignore next */ node => {
-		const selectorNode = node.childNodes[0];
+	handlePortalExit = /* istanbul ignore next */ () => {
+		const selectorNode = this.fipDropDownRef.current;
 		this.resetPortalStyle(selectorNode);
 		const { height } = getComputedStyle(selectorNode);
 		selectorNode.style.maxHeight = height;
 	};
-	handlePortalExiting = /* istanbul ignore next */ node => {
-		const selectorNode = node.childNodes[0];
+	handlePortalExiting = /* istanbul ignore next */ () => {
+		const selectorNode = this.fipDropDownRef.current;
 		selectorNode.style.maxHeight = '0px';
 		selectorNode.style.paddingTop = '0px';
 		selectorNode.style.paddingBottom = '0px';
@@ -457,6 +458,7 @@ class FontIconPicker extends React.PureComponent {
 			handleChangeCategory: this.handleChangeCategory,
 			handleChangePage: this.handleChangePage,
 			handleChangeSearch: this.handleChangeSearch,
+			domRef: this.fipDropDownRef,
 		};
 		return (
 			<div className={this.state.elemClass} ref={this.fipRef}>
@@ -481,11 +483,11 @@ class FontIconPicker extends React.PureComponent {
 					onEntered={this.handlePortalEntered}
 					onExit={this.handlePortalExit}
 					onExiting={this.handlePortalExiting}
-					nodeRef={this.fipDropDownRef}
+					nodeRef={this.fipDropDownPortalRef}
 				>
 					<FipDropDownPortal
 						appendRoot={this.props.appendTo}
-						domRef={this.fipDropDownRef}
+						domRef={this.fipDropDownPortalRef}
 						btnRef={this.fipButtonRef}
 						className={this.state.ddClass}
 					>