How do i disable the auto select, if clicked into the textbox.

[Timo Funk]

I have a SfNumericTextBox like this:

<SfNumericTextBox TValue="int" Placeholder="1" FloatLabelType="@FloatLabelType.Never" @bind-value="View.Value"></SfNumericTextBox>

Every time i click into the textbox the whole number is selected.

How do i prevent the auto select of the whole textbox when i click on it.

[Yohapuja Selvakumaran]

Hi Timo Funk,

Thank you for reaching out to us. We have carefully reviewed your requirement and have created a sample based on it, utilizing the setSelectionRange method to prevent selection while focusing on the component. Below is the code snippet for your reference.

Code snippet:

[Index.razor]

 

<SfNumericTextBox CssClass="prevent-select" TValue="int" Placeholder="1" FloatLabelType="@FloatLabelType.Never" @bind-value="numValue" >

    <NumericTextBoxEvents TValue="int" Focus="FocusHandler"></NumericTextBoxEvents>

</SfNumericTextBox>

 

@code{

    public int numValue{get; set;} = 10;

 

    public async void FocusHandler()

    {

         await JSRuntime.InvokeVoidAsync("preventSelectionFunction");

    }

}

 

[Layout.cshtml]

 

    <script>

       function preventSelectionFunction(){

            setTimeout(function () {

            debugger;

                var valLen = document.querySelectorAll('input')[0].value.length;

                document.querySelectorAll('input')[0].setSelectionRange(valLen, valLen);

            }, 100);

        };

    </script>

In the provided code snippet, we utilized the setSelectionRange method within a JavaScript function called preventSelectionFunction. This function is invoked when the component is focused, as specified in the FocusHandler method, we effectively prevent selection while focusing on the component. Please find the sample in the attachment.

Regards,

Yohapuja S

Attachment: Numeric_selection_bb78b983.zip

[Timo Funk]

Yes, that kind of works.

But sadly I lose the cursor position in the input field, its not like a text input field, where I can select straight away. And I lose the select auto all functionality when I user Tab to tab into it, that I did like. And I really don't like the timeout part.

I think I used the wrong control from the start. I'll going to use a SfTextBox, and start from there to get what I want.

I'll rather add something to a control instead of removing something that I didn't want in the first place.

[Yohapuja Selvakumaran]

Hi Timo Funk,

We apologize for the delay in our response. After further investigation, we would like to inform you that the behavior you are experiencing, where the value is selected when focusing the component, is indeed the default behavior.

While we explored various possibilities to address this issue, we have determined that there is no alternative method available to achieve the desired outcome in blazor. However, if you prefer not to select the value while focusing, you can achieve this by utilizing the setSelectionRange function within the focus event using jsinterop.

To provide a more efficient solution, we have managed to reduce the time delay and successfully implemented this approach. We encourage you to review the attached sample for reference.

We appreciate your patience and understanding in this matter. If you have any further questions or concerns, please get back to us.

Regards,

Yohapuja S

Attachment: Numeric_textbox_a4ae0f77.zip