Skip to content

Update the Portal component to use the new react portal api (when overflowBoundaryElement is used for position) #3029

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Update the Portal component to use the new react portal api (when overflowBoundaryElement is used for position) #3029

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b674d18
Fixing portal by switching from ReactDOM.unstable_renderSubtreeIntoCo…
bolivierjr Apr 11, 2022
1e96748
Removed the onOpen prop since it is no longer being used in Portal.jsx
bolivierjr Apr 11, 2022
4f87456
Added the onOpen prop back into the Portal component and state change…
bolivierjr Apr 11, 2022
cfecc39
Added the updatePortal method before setting the state for the portal…
bolivierjr Apr 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 17 additions & 19 deletions components/utilities/dialog/portal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ class Portal extends Component {
this.portalNode = null;
this.state = {
isOpen: false,
portalContainer: null,
};
}

Expand Down Expand Up @@ -68,12 +69,19 @@ class Portal extends Component {
this.portalNodeInstance = this.props.onMount
? this.props.onMount(undefined, { portal: this.portalNode })
: this.portalNode;

if (!this.props.portalMount) {
this.updatePortal();
this.setState({ portalContainer: this.portalNode });
}
}
}

unmountPortal() {
if (this.portalNode) {
ReactDOM.unmountComponentAtNode(this.portalNode);
if (this.portalMount) {
ReactDOM.unmountComponentAtNode(this.portalNode);
}
this.portalNode.parentNode.removeChild(this.portalNode);
}
this.portalNode = null;
Expand Down Expand Up @@ -119,28 +127,18 @@ class Portal extends Component {
this.updatePortal(); // update after subtree renders
},
});
} else {
// actual render
ReactDOM.unstable_renderSubtreeIntoContainer(
this,
this.getChildren(),
this.portalNode,
() => {
this.updatePortal(); // update after subtree renders

if (this.state.isOpen === false) {
if (this.props.onOpen) {
this.props.onOpen(undefined, { portal: this.getChildren() });
}
this.setState({ isOpen: true });
}
}
);
} else if (this.state.isOpen === false) {
if (this.props.onOpen) {
this.props.onOpen(undefined, { portal: this.getChildren() });
}
this.setState({ isOpen: true });
}
}

render() {
return null;
return !this.props.portalMount && this.state.portalContainer
? ReactDOM.createPortal(this.props.children, this.state.portalContainer)
: null;
}
}

Expand Down