How to trigger event when text value changes

[Dave]

I am attempting to use the ValueChange event to handle changes to an InPlaceEditor text field. In my sample code the event doesn't seem to trigger on the first change to the text but will trigger on a subsequent change. Could you advise on the correct way to code this? Thanks.

<div>Changes = @Changes</div>

<div>Async Changes = @ChangesAsync</div>

<div>

    <SfInPlaceEditor Mode=Syncfusion.Blazor.InPlaceEditor.RenderMode.Inline

                     EditableOn=Syncfusion.Blazor.InPlaceEditor.EditableType.Click

                     Type=Syncfusion.Blazor.InPlaceEditor.InputType.Text

                     TValue="string"

                     ShowButtons=false

                     Disabled=false

                     @bind-Value=@Name

                     SubmitOnEnter=true>

        <EditorComponent>

            <SfTextBox @bind-Value=@Name></SfTextBox>

        </EditorComponent>

        <InPlaceEditorEvents ValueChange=@ChangeNameField TValue="string"></InPlaceEditorEvents>

    </SfInPlaceEditor>

</div>

<div>

    <SfInPlaceEditor Mode=Syncfusion.Blazor.InPlaceEditor.RenderMode.Inline

                     EditableOn=Syncfusion.Blazor.InPlaceEditor.EditableType.Click

                     Type=Syncfusion.Blazor.InPlaceEditor.InputType.Text

                     TValue="string"

                     ShowButtons=false

                     Disabled=false

                     @bind-Value=@NameAsync

                     SubmitOnEnter=true>

        <EditorComponent>

            <SfTextBox @bind-Value=@NameAsync></SfTextBox>

        </EditorComponent>

        <InPlaceEditorEvents ValueChange=@ChangeNameFieldAsync TValue="string"></InPlaceEditorEvents>

    </SfInPlaceEditor>

</div>

@code {

    public string Name = "test";

    public string NameAsync = "test async";

    public int Changes = 0;

    public int ChangesAsync = 0;

    protected async Task ChangeNameFieldAsync(Syncfusion.Blazor.InPlaceEditor.ChangeEventArgs<string> args)

    {

        await Task.Delay(10);

        ChangesAsync++;

    }

    protected void ChangeNameField(Syncfusion.Blazor.InPlaceEditor.ChangeEventArgs<string> args)

    {

        Changes++;

    }

}

[Indrajith Srinivasan]

Hi Dave, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query and able to reproduce the reported issue. We have also considered “In-place editor ValueChange event is not triggered properly for the first time” as a bug from our end and logged the report for the same, and the fix will be included with our patch release on 26^th January.  

   

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/21148/   

 

Until then, we suggest you to bind the change event for the corresponding component to resolve the reported issue. Check the below code blocks and modified sample for reference. 

 

 

@using Syncfusion.Blazor.InPlaceEditor 

@using Syncfusion.Blazor.Inputs 

 

<div>Changes = @Changes</div> 

<div>Async Changes = @ChangesAsync</div> 

<div> 

    <SfInPlaceEditor Mode=Syncfusion.Blazor.InPlaceEditor.RenderMode.Inline 

                     EditableOn=Syncfusion.Blazor.InPlaceEditor.EditableType.Click 

                     Type=Syncfusion.Blazor.InPlaceEditor.InputType.Text 

                     TValue="string" 

                     ShowButtons=true 

                     Disabled=false 

                     @bind-Value=@Name 

                     SubmitOnEnter=true> 

        <EditorComponent> 

            <SfTextBox @bind-Value=@Name ValueChange="@ChangeNameField"></SfTextBox>  

        </EditorComponent> 

        @*<InPlaceEditorEvents ValueChange=@ChangeNameField TValue="string"></InPlaceEditorEvents>*@ 

    </SfInPlaceEditor> 

</div> 

<div> 

    <SfInPlaceEditor Mode=Syncfusion.Blazor.InPlaceEditor.RenderMode.Inline 

                     EditableOn=Syncfusion.Blazor.InPlaceEditor.EditableType.Click 

                     Type=Syncfusion.Blazor.InPlaceEditor.InputType.Text 

                     TValue="string" 

                     ShowButtons=true 

                     Disabled=false 

                     @bind-Value=@NameAsync 

                     SubmitOnEnter=true> 

        <EditorComponent> 

            <SfTextBox @bind-Value=@NameAsync ValueChange="@ChangeNameFieldAsync"></SfTextBox> 

        </EditorComponent> 

        @*<InPlaceEditorEvents ValueChange=@ChangeNameFieldAsync TValue="string"></InPlaceEditorEvents>*@ 

    </SfInPlaceEditor> 

</div> 

 

@code { 

    public string Name { get; set; } = "test"; 

    public string NameAsync { get; set; } = "test async"; 

    public string TextboxName { get; set; } = "test"; 

    public string TextboxNameAsync { get; set; } = "test async"; 

    public int Changes = 0; 

    public int ChangesAsync = 0; 

 

    protected async Task ChangeNameFieldAsync(Syncfusion.Blazor.Inputs.ChangedEventArgs args) 

    { 

        await Task.Delay(10); 

        ChangesAsync++; 

    } 

 

    protected void ChangeNameField(Syncfusion.Blazor.Inputs.ChangedEventArgs args) 

    { 

        Changes++; 

    } 

 

} 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/161196/ze/SfInplace-Editor_valueChange-759767144  

 

Please get back to us if you face any difficulties, 

 

Regards, 

Indrajith 

[jlwarranty]

Did this ever get fixed?
Can you link me to any documentation on how to do it using InPlaceEditorEvents?

Or do we need to keep using the  ValueChange on the SfTextBox? 

[Indrajith Srinivasan]

Hi Jlwarranty,

You can use the ValueChange event in the corresponding components, for detecting each value changes when using as EditorComponent . Below it the documentation for the events in the In-place editor.

Documentation: https://blazor.syncfusion.com/documentation/in-place-editor/events

Regards,

Indrajith