C1TextBox and bind-Text Issue

C1TextBox and bind-Text Issue

Posted by: james on 1 August 2024, 1:11 am EST

• 

  james

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 1 August 2024, 1:11 am EST

  Hi

  I really have not had much luck with the C1 controls for Blazor.

  The C1TextBox with bind-Text is rather buggy.
  
  I thought it may have just been me, but I found its usage on the C1 website, and verified it happens there too. I’ve tried lots of other ways instead of using bind-Text, but all have the issue, some less, and some more. I’ve even tried helper methods with timers etc…

  I am using the default blazor InputText control instead now instead of C1, and it works flawlessly. But I was trying to stick with all C1 controls because of the styling issues which I’ve outlined on other posts.

  At least this time around I don’t need to make a sample, as you can view the problem online: https://developer.mescius.com/componentone/demos/blazor/blazorserverexplorer/FlexGrid/Index

  The Problem
  
  Letters are deleted if you type at a reasonable speed into the textbox. Sometimes it deletes the whole word, sometimes it deletes 3 letters, sometimes it jumbles.

  To reproduce, browse to https://developer.mescius.com/componentone/demos/blazor/blazorserverexplorer/FlexGrid/Index and type into the filter textbox above the grid. Anything will do, but typing something like “this is my sentence” at anything over a snails pace and you will see the issue.
  
  Doing it twice, the first time I get “this iy sence”, the second “this iene”.

  This is nothing to do with the grid sample, I just did a find-all in the C1 samples for C1TextBox to see where it was used with bind-Text as this is when the issue is most prevalent, but I also got it to happen plain without any binding.

  Thanks
  
  James

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 2 August 2024, 8:23 am EST

  Hi James,

  I noticed that when typing quickly, some texts get removed or jumbled. This issue occurs only when the C1TextBox is bound to the filter string of the FlexGrid. I have escalated this issue to the development team for further investigation. The internal tracking ID is C1XAML-36723.

  Additionally, in simpler cases where the C1TextBox text is bound to another element, it works fine. Please refer to the attached sample demonstrating this.

  If you encounter this issue in other scenarios (besides the FlexGrid filter), please share the sample with us. You can also modify the attached sample and share it back.

  Regards,

  Ankit

  C1TextBox_Typing.zip

• 

  james

  • Post Options:
  • Link
    Copy

  Posted 5 August 2024, 2:45 am EST

  Hi Ankit

  Sorry, I should have been more descriptive in my initial post.

  Your sample still has the issue, binding to another element does not work.

  The issue is most noticable if you are not local to the web server.
  
  In other words, if you are debugging on your local machine, then you most likely not notice the issue.

  In addition, the issue still happens if binding is not used - and you use an event such as “TextChanged”.

  I am using .Net 8, and Server Side Interactive model.

  I published your sample to https://test-app-c1textboxtyping20240805141054.azurewebsites.net/ so you can go to the link see the issue is still there.

  I also added an extra C1TextBox that is unbound, but simply linked to a TextChanged event to show the issue happens in that scenario too.

  In answer to your question directly, you will notice that the “filter” box on a flexgrid is also effected by the issue.

  I have uploaded my code:
  
  BlazorAppC1TextBoxTest.zip

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 7 August 2024, 5:24 am EST

  Hi,

  For the escalated case with id C1XAML-36723, the developers have mentioned that the observed behaviour is expected.

  In a server-hosted Blazor application, delays occur because changes need to travel from the client to the server and back. Binding to the Text property means that every keyboard input triggering a value change also triggers the TextChanged event callback. As the user types, the server returns updated values, leading to the page being re-rendered. Consequently, the component re-renders with the updated value, potentially causing some typed characters to be lost.

  In contrast, a WASM-hosted application does not experience this issue, as everything happens on the client side without delays. For instance, with FlexGrid in the C1 Blazor application (https://developer.mescius.com/componentone/demos/blazor/blazorexplorer/FlexGrid/Index), the absence of such delays results in smoother interaction.

  To avoid this effect in a server-hosted app, the C1TextBox.FinishedTextChange event (https://developer.mescius.com/componentone/docs/blazor/online-blazor/C1.Blazor.Input~C1.Blazor.Input.C1TextBox~FinishedTextChange.html) could be used instead, which fires when the text has been changed (refer to https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)

  -------------------------------------------------------------------------------------------------------------------------------------------The same behaviour can be observed in the sample that you shared. If you try to create the sample in the Blazor Web Assembly, then it works fine without any issues.

  I am attaching a sample in Blazor Web Assembly, and you could verify with the sample. I hope that clarifies your query. Let me know if you still have any doubts or face any issues.

  Regards,

  Ankit

  Blazor_TextBox.zip

• 

  james

  • Post Options:
  • Link
    Copy

  Posted 7 August 2024, 8:26 pm EST - Updated 7 August 2024, 8:32 pm EST

  Hi Ankit

  A couple of things:

  • We need ServerSide Interactive.

  • The Microsoft.AspNetCore.Components.Forms “InputText” works with binding. From testing, it appears that they most likely take advantage of something similar to FinishedTextChange in their solution, but must wrap it up so they can provide the functionality of two-way binding. I say this because the update occurs when you click away. Can ComponentOne provide binding in a similar fashion, such that we can use binding instead of having to listen to change events both sides of the equation to update both ways, and do initial setting etc… it is a lot of overhead, whereas with binding it is extremely simple.

  In short, InputText from Microsoft works with binding, I’d like C1TextBox to do the same.

  • From your response, I assume you mean that when creating the sample website that https://developer.mescius.com/componentone/demos/blazor/blazorserverexplorer/FlexGrid/Index that the top textbox on there is incorrectly using Binding instead of FinishedTextChange or something similar?

  • Please have a look at my screenshot attached to this response, in regards to the “Contains” box that is part of the “column” filter dropdown. This also has the issue. Is the official response that the “FlexGrid” when used in “ServerSide Interactive” mode must be typed into slowly? Or are these considering incorrect implementations of the C1TextBox to be adjusted/fixed?

  • Is it possible to get the documentation for Blazor updated? For example, https://developer.mescius.com/componentone/docs/blazor/online-blazor/input-controls.html does not show the TextBox, but scrolling to the bottom of https://developer.mescius.com/componentone/blazor-ui-controls under “Explore All Blazor Controls” you can see it listed under Input & Editing.

  Thanks for your help.

  Kind Regards
  
  James

  

  715×582 58.8 KB

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 12 August 2024, 2:12 am EST

  Hi,

  I am investigating the behaviour of the C1TextBox and the default text box at my end. I will update you about my findings soon and also will answer your other queries.

  Regards,

  Ankit

• 

  james

  • Post Options:
  • Link
    Copy

  Posted 12 August 2024, 3:39 am EST

  Thanks Ankit.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 13 August 2024, 7:15 am EST

  Hi,

  Thank you for your patience.

  1. I’ve requested the development team to consider modifying the demo implementation (https://developer.mescius.com/componentone/demos/blazor/blazorserverexplorer/FlexGrid/Index) to use “FinishedTextChange” or a similar event to avoid rendering issues.

  2. I’ve also submitted an enhancement request to the dev team to improve the binding behavior of the C1TextBox Control by utilizing the FinishedTextChange event (or a similar one) for input value binding. The internal tracking ID for this request is C1XAML-36771.

  3. Additionally, I noticed the rendering issue occurs when using the Grid Column Text Box. I’ve reported this to the relevant development team, and the internal tracking ID for this issue is C1XAML-36772.

  4. I’ve asked the documentation team to include “TextBox” in the Input Controls section. The tracking ID for this request is C1DOC-9937.

  I will keep you updated as soon as I hear back from the development or documentation teams.

  Best regards,

  Ankit

• 

  james

  • Post Options:
  • Link
    Copy

  Posted 13 August 2024, 8:54 pm EST

  Hi Ankit

  Thank you very much for your action. It is much appreciated.

  Kind Regards
  
  James

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 19 August 2024, 12:28 am EST

  Hi,

  The developers have mentioned that there is already a way to use another event for binding with “@bind:event”. You could use the following code snippet to listen to “FinishedTextChange” instead of “TextChanged” (i.e., on focus lost when text was changed.)

  <C1.Blazor.Input.C1TextBox @bind-Text="filterString" @bind-Text:event="FinishedTextChange"  />

  Further, the devs have created a task to check the ability to avoid rendering in the C1TextBox. The internal tracking id for the task is C1XAML-36727.

  Further, the devs have also mentioned that changes to the demo sample behaviour and to the “Filter Text Box” of the FlexGrid will be based on the result from the task C1XAML-36727.

  I will let you know when there is further update on this from the dev team. For now, you could use the above-mentioned code to bind to the “FinishedTextChange” event.

  Regards,

  Ankit

• 

  james

  • Post Options:
  • Link
    Copy

  Posted 23 August 2024, 2:41 am EST

  Hi Ankit

  That’s great to know, thanks! I feel like there are a lot of hidden features that would be handy, but I can’t seem to find them in the documentation.
  
  If time permits, I’ll switch back to the C1TextBox and use the above mentioned method to make it work with binding. Thanks for the response.

  Kind Regards
  
  James

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 25 August 2024, 11:23 pm EST

  Hi James,

  Regarding the issue with the Filter TextBox rendering issue (C1XAML-36723), the devs have mentioned that the C1TextBox has limitation in binding functionality for server-side hosted applications and a bug was created to fix the issue. The internal tracking id for the bug is C1XAML-36818.

  Currently, there is no ETA for this. I will update you once there is more information on this from the development team.

  Regards,

  Ankit

• 

  james

  • Post Options:
  • Link
    Copy

  Posted 8 September 2024, 8:07 pm EST

  Hi Ankit

  Thanks for the extra information.

  Kind Regards
  
  James