EuiInnerText returns an empty string for innerText (node contents) when used within EuiPopover.
The ref is correctly set and the node does in fact have content, but node.innerText returns empty. node.textContent, however, correctly returns the content string. Given
|
// Check for `innerText` implementation rather than a simple OR check |
|
// because in real cases the result of `innerText` could correctly be `null` |
|
// while the result of `textContent` could correctly be non-`null` due to |
|
// differing reliance on browser layout calculations. |
|
// We prefer the result of `innerText`, if available. |
|
'innerText' in node |
|
? node.innerText |
|
: node.textContent || innerTextFallback |
we accept the empty string over the content string.
There are important differences between the two methods, most notably that
innerText only shows "human-readable" elements
and
innerText is aware of styling and won’t return the text of “hidden” elements.
It's likely that while EuiPopover is opening (and at the time the node is evaluated) some style or attribute is marking the node as hidden or not human-readable. innerText has the correct content inside EuiPopover if delayed until after the popover is stable open.
Repro: https://codesandbox.io/embed/cold-currying-tpfgf?fontsize=14&hidenavigation=1&theme=dark
EuiInnerTextreturns an empty string forinnerText(node contents) when used withinEuiPopover.The
refis correctly set and the node does in fact have content, butnode.innerTextreturns empty.node.textContent, however, correctly returns the content string. Giveneui/src/components/inner_text/inner_text.tsx
Lines 29 to 36 in 3d9a593
we accept the empty string over the content string.
There are important differences between the two methods, most notably that
and
It's likely that while
EuiPopoveris opening (and at the time the node is evaluated) some style or attribute is marking the node as hidden or not human-readable.innerTexthas the correct content insideEuiPopoverif delayed until after the popover is stable open.Repro: https://codesandbox.io/embed/cold-currying-tpfgf?fontsize=14&hidenavigation=1&theme=dark