Comments (4)
I'm going to go ahead and close this as a wontfix as this isn't an issue with EUI itself but rather a third party dependency (jsdom), and a workaround exists (see above code snippet).
from eui.
@mbondyra I'm actually not able to reproduce this on either local EUI or in a CodeSandbox 😕
Are you seeing the error in https://codesandbox.io/p/sandbox/white-mountain-3pypwc?file=%2Fdemo.js
? I tested in both Firefox and Chrome and no NaN
error appeared in the dev console.
from eui.
OH sorry - I missed the part where this affects tests 🙈 This is likely a jsdom issue (e.g., DOM elements not actually having heights etc) that will need to be worked around/polyfilled in a local Jest test setup.
I'll poke around a bit more to confirm what's needed to get this working, but it's possible this may not be something EUI will fix in production/source code.
from eui.
The missing jsdom property appears to be window.getComputedStyle
and it only appears to occur on rerender - see jsdom/jsdom#2986 🥲
The NaN generated comes from these lines specifically:
eui/src/components/datagrid/utils/row_heights.ts
Lines 139 to 140 in 88911d7
I could add an IS_JEST_ENVIRONMENT
check to our internal calculateHeightForLineCount
logic, but that feels kinda bad when our dynamic line height logic/tests work right now in Jest without a workaround. Maybe we should wait for jsdom to fix the issue on their end? 😬
@mbondyra For your use case with a useEffect rerender, I think I lean towards asking y'all to polyfill window.getComputedStyle
instead. Can you try something like:
jest
.spyOn(window, 'getComputedStyle')
.mockImplementation(() => ({ lineHeight: '16px' } as any));
from eui.
Related Issues (20)
- [EuiFlex] Add missing props to `EuiFlexGroup` and `EuiFlexItem`
- [Meta] Support React Strict Mode
- EuiPortal should be able to use different portal target than document.body based on provided Context HOT 7
- [EuiDataGrid] Cell text content visible below truncation when using `fontSize: "s"`
- FlexItem does not accept HTMLAttributes like title anymore HOT 2
- EuiSteps unordered variant HOT 6
- [EuiSelectableTemplateSitewide] Allow default a link behavior for results HOT 3
- [EuiTabs ][A11Y] - Using `EuiBetaBadge` within `EuiTab` HOT 3
- Spike: Explore switching to Yarn Berry
- [New docs] Implement typography design changes
- [EuiComboBox] support for append and prepend on group labels
- setEuiDevProviderWarning to accept an optional callback function
- [EuiDataGrid] Ensure gridStyles updates trigger a cell height recalculation
- [New docs] Fix `EuiProvider`'s `globalStyles` breaking docusaurus styles
- Avatar: Calculate high-contrast text against background
- [EuiDataGrid] Cell filtering UX unusable after scroll HOT 12
- [Docs] EuiProvider custom breakpoints example no longer works
- Datagrid - Rearranging visible columns works on the grid but does not hold state on drop down menu.
- [EuiIcon] Update the `logoElasticStack` icon to latest
- [DataGrid] Enable `Auto Fit` behavior when `Cell row height` - `Custom` is selected
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eui.