Premium support for our pure JavaScript UI components


Post by mkelch »

We are developing an LWC that uses the Grid library. We have noticed that when row grouping is enabled, there's a chance for Font Awesome icons within the table to disappear when quickly scrolling away from and back to a row. When the row grouping feature is disabled the issue is not reproducible.

Attached is a video demo of this happening in our Salesforce org.

I've also attached the full JS file for our LWC. Below are some snippets from the JS showing the grid and column config:

this.grid = new bryntum.grid.Grid({
  appendTo: this.template.querySelector("div.grid-container"),
  columns: this.columns,
  store: this.rowDataStore,
  features: {
      group: {
          field: "target",
          renderer: ({ groupRowFor, isFirstColumn }) => {
              if (!isFirstColumn) {
                  return "";
              }
              return groupRowFor ? "Targets" : "Non-Targets";
          },
      },
  },
});
this.columns = [
  {
    id: "target",
    field: "target",
    icon: "b-fa b-fa-bullseye",
    width: 70,
    locked: true,
    align: "center",
    resizable: false,
    renderer: ({ value }) =>
        value ? { tag: "i", class: "b-fa b-fa-bullseye target-icon" } : "",
  },
];

Thanks in advance for your feedback!

Attachments
accountsPage.js
(2.01 KiB) Downloaded 18 times
BryntumDisappearingIcons.mov
(6.92 MiB) Downloaded 19 times

Post by Maxim Gorkovsky »

Hello.
Which grid version do you use?


Post by mkelch »

Hello, we are currently on version 5.1.0 of the LWC module.


Post by Maxim Gorkovsky »

Version 5.1.0 has a serious bug: https://github.com/bryntum/support/issues/4979 Can you try upgrading to 5.1.1 release?


Post by mkelch »

Thanks for the feedback. However, I was able to reproduce the issue with the 5.1.1 release.


Post by Maxim Gorkovsky »

Reproduced, ticket opened here: https://github.com/bryntum/support/issues/5094 Thank you for report.

There is a workaround you can apply to fix this problem on the app level - you need to always return Object from the renderer:

renderer  : ({ value }) => (value ? { tag : 'i', class : 'b-fa b-fa-bullseye target-icon' } : { html : '' })

Post by mkelch »

Excellent, thank you for the workaround!


Post Reply