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 (
-
+
{this.props.showSearch ? (
{
- 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 (
@@ -481,10 +483,11 @@ class FontIconPicker extends React.PureComponent {
onEntered={this.handlePortalEntered}
onExit={this.handlePortalExit}
onExiting={this.handlePortalExiting}
+ nodeRef={this.fipDropDownPortalRef}
>