NumericTextBox onfocus select

10 posts, 0 answers
  1. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2019

    Posted 17 Nov 2020 Link to this post

    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.

     

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 18 Nov 2020 Link to this post

    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/.

  3. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2019

    Posted 18 Nov 2020 in reply to Stefan Link to this post

    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"

  4. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2019
  5. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2019
  6. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 19 Nov 2020 Link to this post

    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/.

  7. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2019

    Posted 19 Nov 2020 in reply to Stefan Link to this post

    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"

  8. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 20 Nov 2020 Link to this post

    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/.

  9. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2019

    Posted 26 Nov 2020 in reply to Stefan Link to this post

    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();
        }
  10. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 26 Nov 2020 Link to this post

    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/.

Back to Top