Skip to content
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.

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

[grid] Dynamic imports for custom columns break throw autoWidth: true #7062

Closed
web-padawan opened this issue Jan 10, 2024 · 0 comments · Fixed by #7064
Closed

[grid] Dynamic imports for custom columns break throw autoWidth: true #7062

web-padawan opened this issue Jan 10, 2024 · 0 comments · Fixed by #7064

Comments

@web-padawan
Copy link
Member

web-padawan commented Jan 10, 2024

Description

This is a finding from vaadin/react-components#210 (comment)

When the column HTML element is attached to the grid before the corresponding custom element is upgraded, there is an error thrown in case this column has autoWidth property set to true due to column._allCells being undefined:

TypeError: Cannot read properties of undefined (reading 'filter')
    at Grid.__setVisibleCellContentAutoWidth (chunk-IQKOLFSK.js?v=61d41aa2:4773:19)
    at chunk-IQKOLFSK.js?v=61d41aa2:4813:32
    at Array.forEach (<anonymous>)
    at Grid.__calculateAndCacheIntrinsicWidths (chunk-IQKOLFSK.js?v=61d41aa2:4813:10)
    at Grid._recalculateColumnWidths (chunk-IQKOLFSK.js?v=61d41aa2:4759:10)
    at Grid.recalculateColumnWidths (chunk-IQKOLFSK.js?v=61d41aa2:4832:10)
    at Grid._columnTreeChanged (chunk-IQKOLFSK.js?v=61d41aa2:5087:10)
    at Object.runMethodEffect [as fn] (chunk-H7ZGI7AV.js?v=61d41aa2:2238:38)
    at runEffects (chunk-H7ZGI7AV.js?v=61d41aa2:1782:16)
    at Grid._propertiesChanged (chunk-H7ZGI7AV.js?v=61d41aa2:2873:7)

Expected outcome

Expected no errors. Maybe the column auto-width calculation should be triggered again once the column is defined.

Minimal reproducible example

<vaadin-grid>
  <vaadin-grid-column path="surname"></vaadin-grid-column>
</vaadin-grid>
<script type="module">
  import '@vaadin/grid';

  const grid = document.querySelector('vaadin-grid');

  grid.items = [
    { name: 'John', surname: 'Lennon', role: 'singer' },
    { name: 'Ringo', surname: 'Starr', role: 'drums' },
  ];

  setTimeout(() => {
    const column = document.createElement('vaadin-grid-filter-column');
    column.setAttribute('path', 'name');
    column.autoWidth = true;
    grid.insertBefore(column, grid.firstElementChild);

    // Import the column lazily after adding to DOM
    import('@vaadin/grid/vaadin-grid-filter-column.js');
  });
</script>

Steps to reproduce

  1. Add the snippet above to the HTML page
  2. Open the page and check the console

Environment

Vaadin version(s): latest

Browsers

Issue is not browser related

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant