This is a migrated thread and some comments may be shown as answers.

NumericTextBox onfocus select

9 Answers 47 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Veteran
Nick asked on 17 Nov 2020, 08:38 PM

Hi all

I am trying to select all contents of the NumericTextBox when the control gets focus.

I have tried this in the regular way with an onfocus event and in the event event.target.select()

But this does not seem to actually highlight and select the contents. I have googled around and others seem to have this issue but the only examples I can find are for the jquery tools.

 

9 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 18 Nov 2020, 06:00 AM

Hello, Nick,

I tried  the same approach to select the text on the onFocus event and it was correctly selected:

https://stackblitz.com/edit/react-p2jehb?file=app/main.jsx

If the issue still occurs, please share a runnable example reproducing the issue and I will be happy to inspect it locally.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Nick
Top achievements
Rank 1
Veteran
answered on 19 Nov 2020, 01:41 AM

Thanks Stefan

I have created a simple example here:

https://react-p2jehb-5udgw2.stackblitz.io

It uses the onFocus event of the component, but e.target.select() produces: "e.target.select is not a function"

0
Nick
Top achievements
Rank 1
Veteran
answered on 19 Nov 2020, 01:44 AM
0
Nick
Top achievements
Rank 1
Veteran
answered on 19 Nov 2020, 01:46 AM
0
Stefan
Telerik team
answered on 19 Nov 2020, 06:14 AM

Hello, Nick,

This is because the actual element is inside e.target.element.

This is the updated example:

https://stackblitz.com/edit/react-p2jehb?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Nick
Top achievements
Rank 1
Veteran
answered on 19 Nov 2020, 10:19 PM

Hi Stefan

Sorry to say but that is still not working for me. I am using typescript, maybe there is a type issue?

I still get this error: "Uncaught TypeError: e.target.element.select is not a function"

0
Stefan
Telerik team
answered on 20 Nov 2020, 07:55 AM

Hello, Nick,

Please check if the correct event type is passed on the onFocus event:

https://www.telerik.com/kendo-react-ui/components/inputs/api/NumericTextBoxFocusEvent/

onFocus = (event: NumericTextBoxFocusEvent) => {
 event.target.element.select()
}

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Nick
Top achievements
Rank 1
Veteran
answered on 26 Nov 2020, 08:59 PM

After a bit of mucking around it actually requires a reference to "current" so here is the full reference to get access to the select method

const numericTBOnFocus = (event: NumericTextBoxFocusEvent) => {
        event.target.element.current.select();
    }
0
Stefan
Telerik team
answered on 27 Nov 2020, 05:58 AM

Hello, Nick,

I glad to hear that this is resolved.

We will also take a look at this to see why this difference occurs when using TypeScript, as it could be connected with the event type.

Thank you for also sharing the solution with the KendoReact community, it is highly appreciated.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Nick
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Nick
Top achievements
Rank 1
Veteran
Share this question
or