Masked Textbox loose focus on each new sign inside In Place Editor

[Stanislav Gordenko]

I try to embed to masked Text Box into In Place Editor:

                                <SfInPlaceEditor Mode="RenderMode.Inline" Type="InputType.Text" TValue="string" Value="@ProfileUser.CardNo" CssClass="w-100"

                                                 EmptyText="@StringLocalizer["Enter discount card number..."]" ShowButtons="false" ActionOnBlur="ActionBlur.Ignore" SubmitOnEnter="true">

                                    <InPlaceEditorEvents TValue="string" OnActionBegin="OnCardNoChanging" />

                                    <InPlaceEditorTemplates>

                                        <Template>

                                            <SfMaskedTextBox Placeholder="@(StringLocalizer["Enter discount card number..."])" ShowClearButton="true" 

                                                             @bind-Value="@ProfileUser.CardNo" Mask="9999999999999999" />

                                        </Template>

                                    </InPlaceEditorTemplates>

                                </SfInPlaceEditor>

When I try to enter any new sign, In Place Editor turn off its Edit mode without saving.

[Revanth Krishnan]

Hi tanislav, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “The in-place editor closes the edit mode when entering a value in the masked text box”. 

 

We suspect this issue occurs due to the Syncfusion’s masked textbox rendered inside the In-place Editor template. The template support mainly to integrate the HTML5 components within the in-place editor.. 

 

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

 

We have provided built-in support for the masked textbox in In-place editor, that fulfills your requirement. We have prepared a sample based on the code snippet and shared it for your reference, 

 

Code Snippet: 

 

<SfInPlaceEditor Mode="RenderMode.Inline" Type="InputType.Mask" Value="@MaskValue" Model="@MaskedModel" CssClass="w-100" EmptyText="Enter discount card numbe paret" ShowButtons="false" ActionOnBlur="ActionBlur.Ignore" SubmitOnEnter="true"> 

</SfInPlaceEditor> 

 

@code { 

    public string MaskValue = "123-345-678"; 

    public MaskedTextBoxModel MaskedModel = new MaskedTextBoxModel() 

    { 

        Mask = "000-000-000" 

    }; 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/155322/ze/InPlace-MaskedTextBox-96841394 

 

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

 

Please let us know and confirm whether the above code snippet and the sample help to resolve the issue. 

 

Regards, 

Revanth