NumericTextBox onfocus select

[Nick]

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.

 

[Stefan]

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

[Nick]

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"

[Nick]

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

 

[Nick]

GRR, third time, this is the one: https://stackblitz.com/edit/react-p2jehb-5udgw2?file=app/main.jsx

[Stefan]

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

[Nick]

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"

[Stefan]

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

[Nick]

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();
    }

[Stefan]

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