Kendo react form not accepting spaces

2 Answers 268 Views

Form Input TreeView

2 Answers, 1 is accepted

Accepted

answered on 05 May 2023, 03:35 PM

const handleKeyDown = (event) => {
        //Check if the key pressed is space
        if (event.key === ' ') {
            //Prevent the default action of the space key
            event.preventDefault();
            //Get the name and value of the input field
            const { name, value } = event.target;
            //Add a space to the value
            const newValue = value + ' ';
            //Call the change handler function with the new value
            changeHandler({ target: { name, value: newValue,}});
        }
    };

VIJAY

commented on 05 May 2023, 03:36 PM

call the handleKeyDown function in onKeyDown event

Filip

commented on 08 May 2023, 09:27 AM

Hi Vijay,

Thank you for the provided example, and I am glad that you have found a working solution.

Let us know if further assistance is needed.

Regards,
Filip

answered on 21 Apr 2023, 02:55 PM

Hi, VIJAY,

Can you elaborate a bit on the exact scenario in which you are using the ListView when the issue occurs? The most common use case in which there is a nested form inside the ListView in when it is used in Edit mode. Is this your use case as well?

Are you able to replicate the problem in the demo below or send me a sample where I can reproduce and examine the problematic behavior?

https://stackblitz.com/edit/react-wsnqna?file=app%2Fmain.jsx

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

VIJAY

commented on 23 Apr 2023, 07:06 AM

Hi Vessy,

Yes the form is nested in listView componet but the listView is nested inside treeView and i figured out that treeView causing the issue and i couldn't solve it

Vessy

commented on 24 Apr 2023, 12:27 PM

Hi, Vijay,

Thank you for the provided addition information, however it will be hard to pinpoint what is causing this issue without an example that can be debugged. Is it possible to send a runnable sample in Stackblitz like the one provided in my previous reply where I can examine the exact setup leading to the problem and see what is causing it?

VIJAY

commented on 04 May 2023, 10:05 AM

Hi Vessy,

here is the link for stackblitz which recreates the issue i am facing https://stackblitz.com/edit/react-chzgpq?file=src/App.js

Note : This is just a sample code

VIJAY

commented on 05 May 2023, 03:31 PM | edited

i figured out that somehow when spacebar pressed it is not trigerring onChange event for the input field. I added a onkeydown event for input field which will call trigger onChange event manually when space bar is pressed and passes "space" as a value to onChangeHandler. This solves the issue

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Kendo react form not accepting spaces

2 Answers, 1 is accepted