diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx index 618548e2f4b..8420b23a241 100644 --- a/packages/core/src/components/popover/popover.tsx +++ b/packages/core/src/components/popover/popover.tsx @@ -249,11 +249,10 @@ export class Popover< } public render() { - const { disabled, content, placement, position = "auto", positioningStrategy } = this.props; + const { disabled, placement, position = "auto", positioningStrategy } = this.props; const { isOpen } = this.state; - const isContentEmpty = content == null || (typeof content === "string" && content.trim() === ""); - if (isContentEmpty) { + if (this.getIsContentEmpty()) { // need to do this check in render(), because `isOpen` is derived from // state, and state can't necessarily be accessed in validateProps. if (!disabled && isOpen !== false && !Utils.isNodeEnv("production")) { @@ -344,7 +343,7 @@ export class Popover< public reposition = () => this.popperScheduleUpdate?.(); private renderTarget = ({ ref: popperChildRef }: ReferenceChildrenProps) => { - const { children, className, content, disabled, fill, openOnTargetFocus, renderTarget } = this.props; + const { children, className, disabled, fill, openOnTargetFocus, renderTarget } = this.props; const { isOpen } = this.state; const isControlled = this.isControlled(); const isHoverInteractionKind = this.isHoverInteractionKind(); @@ -376,7 +375,7 @@ export class Popover< }; // Ensure target is focusable if relevant prop enabled const targetTabIndex = - content != null && !disabled && openOnTargetFocus && isHoverInteractionKind ? 0 : undefined; + !this.getIsContentEmpty() && !disabled && openOnTargetFocus && isHoverInteractionKind ? 0 : undefined; const ownTargetProps = { // N.B. this.props.className is passed along to renderTarget even though the user would have access to it. // If, instead, renderTarget is undefined and the target is provided as a child, this.props.className is @@ -789,6 +788,11 @@ export class Popover< private isElementInPopover(element: Element) { return this.getPopoverElement()?.contains(element) ?? false; } + + private getIsContentEmpty() { + const { content } = this.props; + return content == null || (typeof content === "string" && content.trim() === ""); + } } function isEscapeKeypressEvent(e?: Event) {