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
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/.
Rank 1
Veteran
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"
Rank 1
Veteran
sorry wrong link: https://stackblitz.com/edit/react-p2jehb?file=app/main.jsx
Rank 1
Veteran
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/.
Rank 1
Veteran
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"
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/.
Rank 1
Veteran
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(); }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/.