Performance issue in Forms with numerous BitTextField inputs in Blazor WebAssembly

[ShahryarSaljoughi]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the bug

I have a page in which there exists quite a few number of inputs, mainly of type BitTextField. Typnig into fields is laggy.

Note that this issue is specific to when interactivity location is client-side (CSR).

Time consumed for processing each keypress event, is completely proportional to how big the page in terms of number of input elements is. (If I comment out some inputs, the rest responds more quickly)

Comparision:

I run profiler, for two pages. Both pages are the same in terms of number of input fields. The first one uses BitTextField and the other used input. Results of page with BitTextField:

Results of page with native inputs:

In page with native elements, keypress consumes 3ms
In page with BitTextField: keypress consumes 400ms

Things I tried that didn't help:

1. Override ShourRender:

Even in case ShouldRender is set to return false and the page is rendered only and exactly once, we still have the problem. So despite the fact that lots of optimizations are about reducing number of rerenders, this seems not to be the soruce fo lag in our case.

use of @onkeypress:stopPropagation

I tried, did not have any affect.

use of ValueExpression and ValueChanged instead of the @bind-Value directive.

It did help, buy only in case the number of input elements is not big enough. I can provide a comparison result dedicated to this change if you need it.

Expected Behavior

I expect to have smooth typing experience in WASM.

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

8.0.205

Anything else?

No response

[msynk]

@ShahryarSaljoughi Thanks for contacting us. could you please provide the source code?

[ShahryarSaljoughi]

@msynk I'll deliver a minimal reproduction, having just those two pages used for comparison by June 8th.

[ShahryarSaljoughi]

@msynk Hi. Here is the source code: https://github.com/ShahryarSaljoughi/Issue7682 App is created using Bit.Boilerplate 8.8.1, with Admin template checked!
SDK Version is 8.0.205

Web app contains two pages (in addition to what already is inside the template): NativeBigForm and BitBigForm.

[msynk]

@ShahryarSaljoughi the link is broken for me. is it a private repo?

[ShahryarSaljoughi]

@msynk my bad, I fixed it. sorry.

[msynk]

@ShahryarSaljoughi Thanks for your efforts on this issue. I investigated this problem and found the same results as your research. this problem only happens inside EditForms with a lot of inputs to validate. As soon as I removed the EditForm and related components the page was responsive as normal. It may be related to a situation that our components do redundant things in times that are not necessary which needs a lot more investigation from our side. I try to do these investigations ASAP and find a solution. Btw, resolving the issue (https://github.com/bitfoundation/bitplatform/issues/7660) might help resolve this problem.

[ShahryarSaljoughi]

@msynk I'll measure the performance as the #7660 is solved and let you if that issue ceases this one or not.

To later commers: So far I've built a software using Bit and can confirm that this not something happening all the time. For now for heavy forms the fastest solution is to stick to native elements.

[msynk]

@ShahryarSaljoughi the new prerelease is out there (v-8.10.0-pre-01), could you plz test this scenario again and let us know of the new result?