Syncfusion elements missing classes on Firefox on rare occassions

[George]

Hello,

I don't know if this is a syncfusion bug, but Ι've noticed that sometimes syncfusion elements such as the the dropdownlistcomponent, the numerictextboxcomponent, the textareacomponent, the date component and datetimepicker component are not rendered correctly on Firefox because they are missing classes. After upgrading to 26.1.35, this has been limited to Grid rows with checkbox and datetime templates.

This is what's happening:

This is how it usually looks:

This happens periodically and only on Firefox. I'm using NextJS and Tailwind CSS.

[Pavithra Subramaniyam]

Hi George,

From your update, we suspect that you have column templates that are losing their content when any state change occurs. When the state variable changes due to a refresh, the templates become empty. To prevent the refresh of template columns, we need to set the statelessTemplates property as 'directiveTemplates' while updating the state value with the template features enabled in the grid component.

[index.js]

 

<GridComponent

            dataSource={scopeData}

            allowPaging

            allowSorting

            allowFiltering

            statelessTemplates={['directiveTemplates']}

            ref={dataGrid}

> 

…

</GridComponent>

If you have any further questions or need additional assistance, please feel free to ask.

Regards,

Pavithra S

[George]

Hello,

I've updated the GridComponent as you've indicated, but unfortunately the issue persists.

[Aishwarya Rameshbabu]

Hi George,

Based on the provided information, we have created a sample using the specified version and were unable to reproduce the reported issue. Please refer to the attached sample and screenshot, where the checkbox and DateTimePicker components are rendered correctly with Syncfusion Grid column templates. If you still experience any issues, please attempt to replicate them in the attached sample. Additionally, please share a video demonstration in which case the issue has been replicated.

Screenshot:

Regards

Aishwarya R

Attachment: 192713_Sample_9f8406f1.zip

[George]

Hi,

I have created a video demonstrating the problem. You can see that initially it's rendered correctly, but when I navigate to another page and return something goes wrong. In the video, this happened the first time I tried, but usually it takes several attempts. Refreshing the page, always fixes the problem.

https://streamable.com/uvadl9

Please bear in mind that the link will expire in 2 days.

[Aishwarya Rameshbabu]

Hi George,

Sorry for the inconvenience caused.

We have been able to replicate the reported issue using our sample, but this occurs only at random times and exclusively with the Firefox browser. At present, we are engaged in the process of validating this issue. We are encountering certain complications since the issue manifests solely with a specific browser and only within the Next JS framework, and it happens at random time. So, we will provide you with further details shortly. In the meantime, we appreciate your patience and understanding.

Regards

Aishwarya R

[Aishwarya Rameshbabu]

Hi George,

Thank you for your patience.

We have validated the issue with template rendering in Firefox browser. It occurs exclusively with older versions of Next.js. In the most recent version of Next.js, we were unable to replicate the problem. The issue does not persist with our upgraded packages and the updated version of Next.js. Please refer to the attached sample that uses the latest version of Next.js. Therefore, we recommend upgrading your Syncfusion packages and Next.js to the latest versions. If you still encounter any issues, kindly provide the details of your packages, along with a simple issue replication sample, or attempt to replicate the issue using the attached sample. Providing an issue replication sample will significantly aid us in effectively validating the problem, as we were unable to reproduce it using our sample.

Sample: Please find in the attachment.

Regards

Aishwarya R

Attachment: ej2nextjsgrid_5c57efa6.zip