Description
Which generators are impacted?
- All
- HTML
- React
- Angular
- Vue
- Web components
- Power Apps
Reproduction case
The issue appears in one of our tests which is run by Playwright, so I'm not sure if it can be reproduced easily, but I'll try and explain what is happening.
We have a fairly simple (error boundary) component with a render method looking like this :
render() {
const rootElementClassName = clsx('random-classname', this.props.className);
if (this.state.hasError) {
return (
<div id={this.props.id} className={rootElementClassName}>
<DBIcon icon="exclamation_mark_circle" />
Text 1
<DBButton
type="button"
onClick={this.reload}
icon="circular_arrows"
noText={true}
variant="ghost"
>
<DBTooltip showArrow={false} width="fixed" animation={false}>
Text 2
</DBTooltip>
</DBButton>
</div>
);
}
return this.props.children;
}
Let's imagine we enter the if (this.state.hasError)
condition.
We get some elements displayed, but the 2 most important ones are the DBTooltip and its parent DBButton. When we hover that parent DBButton element, the browser renders a tooltip. Once we click the DBButton element, we set state.hasError
to false
, all elements in the if
condition are removed from the screen and the error boundary component renders its children. When doing this (humanly) in a browser, everything is working fine.
But when the same functionality is done programatically (via vitest and Playwright) in one of our tests, we get an error (please see the attached screenshot).
I did a little bit of debugging, and the issue starts with the DBTooltip component version 2.2.0 (we currently use the version 2.1.2, and it is working fine). This seems to be the problematic pease of code: https://github.com/db-ux-design-system/core-web/blob/v2.2.0/packages/components/src/components/tooltip/tooltip.lite.tsx#L58.
My guess is, before the test clicks the DBButton element, a hover happens which triggers the functionality for placing the tooltip BUT with a delay.
The if (_ref)
(link) is at the moment of hover truly, but because the test runs fast, at the time of utilsDelay
is done, the _ref
is empty, becase our error bounday component removed all previously rendered elements.
We tried using fake timers and similar, but it didn't help. What did help is to first hover the DBButton element, do setTimeout with 10ms and then click the DBButton. Either that, or commenting the utilsDelay
line out of the DBTooltip production build :).
Maybe checking if the _ref
is still truly before executing handleFixedPopover
would help?
Expected Behaviour
The DBTooltip component doesn't fail on non-existing references.
Screenshots
Browser version
None
Add any other context about the problem here.
No response