Skip to content

[Popover/Tooltip] add public reposition() method to schedule popper update #3215

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

Merged
merged 2 commits into from
Dec 7, 2018
Merged

[Popover/Tooltip] add public reposition() method to schedule popper update #3215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4fd2982
[Popover] public reposition method to schedule popper update
Dec 5, 2018
fc7ffea
add tooltip.reposition()
Dec 5, 2018
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
16 changes: 12 additions & 4 deletions packages/core/src/components/popover/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,16 @@ export class Popover extends AbstractPureComponent<IPopoverProps, IPopoverState>
this.updateDarkParent();
}

/**
* Instance method to instruct the `Popover` to recompute its position.
*
* This method should only be used if you are updating the target in a way
* that does not cause it to re-render, such as changing its _position_
* without changing its _size_ (since `Popover` already repositions when it
* detects a resize).
*/
public reposition = () => Utils.safeInvoke(this.popperScheduleUpdate);

protected validateProps(props: IPopoverProps & { children?: React.ReactNode }) {
if (props.isOpen == null && props.onInteraction != null) {
console.warn(Errors.POPOVER_WARN_UNCONTROLLED_ONINTERACTION);
Expand Down Expand Up @@ -283,7 +293,7 @@ export class Popover extends AbstractPureComponent<IPopoverProps, IPopoverState>

return (
<div className={Classes.TRANSITION_CONTAINER} ref={popperProps.ref} style={popperProps.style}>
<ResizeSensor onResize={this.handlePopoverResize}>
<ResizeSensor onResize={this.reposition}>
<div className={popoverClasses} style={{ transformOrigin }} {...popoverHandlers}>
{this.isArrowEnabled() && (
<PopoverArrow arrowProps={popperProps.arrowProps} placement={popperProps.placement} />
Expand Down Expand Up @@ -333,7 +343,7 @@ export class Popover extends AbstractPureComponent<IPopoverProps, IPopoverState>
tabIndex,
});
return (
<ResizeSensor onResize={this.handlePopoverResize}>
<ResizeSensor onResize={this.reposition}>
<TagName {...targetProps} {...finalTargetProps}>
{clonedTarget}
</TagName>
Expand Down Expand Up @@ -457,8 +467,6 @@ export class Popover extends AbstractPureComponent<IPopoverProps, IPopoverState>
}
};

private handlePopoverResize = () => Utils.safeInvoke(this.popperScheduleUpdate);

private handleOverlayClose = (e: React.SyntheticEvent<HTMLElement>) => {
const eventTarget = e.target as HTMLElement;
// if click was in target, target event listener will handle things, so don't close
Expand Down
9 changes: 9 additions & 0 deletions packages/core/src/components/tooltip/tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ export class Tooltip extends React.PureComponent<ITooltipProps, {}> {
transitionDuration: 100,
};

private popover: Popover | null = null;

public render() {
const { children, intent, popoverClassName, ...restProps } = this.props;
const classes = classNames(Classes.TOOLTIP, Classes.intentClass(intent), popoverClassName);
Expand All @@ -68,9 +70,16 @@ export class Tooltip extends React.PureComponent<ITooltipProps, {}> {
lazy={true}
popoverClassName={classes}
portalContainer={this.props.portalContainer}
ref={ref => (this.popover = ref)}
>
{children}
</Popover>
);
}

public reposition() {
if (this.popover != null) {
this.popover.reposition();
}
}
}