Auto focus in Window component

[Tomasz]

Hello,

I need a draggable modal window with a KendoReact Form. What is the best way to set focus to the selected input?
Right now I'm using the Window component (because it's draggable) with the modal={true} option. Unfortunately, the Window component doesn't have an autoFocusedElement prop, which the Dialog component does.

Best,
Tomek 

[Vessy]

Hello,

To set focus on a specific input within the KendoReact Window component, you can use React refs to directly control the focus. Although the Window component does not have the autoFocusedElement prop like the Dialog component, you can achieve the desired functionality using the following approach:

Steps to Set Focus on an Input in KendoReact Window

1. Create a Ref for the Input: Use React's useRef to create a reference to the input element you want to focus.

2. Use useEffect to Set Focus: Once the component mounts, use the useEffect hook to set the focus to the input element using the ref.

3. Implement in the Window Component: Ensure your input is within the Window component and apply the ref.

 

Here's a simple example demonstrating how to set focus on an input element inside a KendoReact Window:

• https://stackblitz.com/edit/react-leya7tq3-eqhsgu2j?file=app%2Fapp.tsx 

    const inputRef = React.useRef(null);

    React.useEffect(() => {
        if (inputRef.current) {
            inputRef.current.focus();
        }
    }, []);
...
    <Input ref={inputRef} placeholder="Focus me!" />

This approach allows you to programmatically focus any input element within the Window component. If you have any further questions or need additional assistance, feel free to ask!

Regards,
Vessy
Progress Telerik

[Tomasz]

Hello, Vessy
Thank you for the feedback.

Unfortunately, the given solution does not work when we want to use KendoReact Form.

Regards,
Tomek

[Tomasz]

Hello, Vessy,

Could you give an example using KendoReact Form? I think when we want to use Field component with ref property it doesn't work. The value of ref.current is always null.

Regards, Tomek

 

[Vessy]

Hi, Tomasz,

You can use the same approach inside a Firm component, but you will need to use custom Input components in order to be able to handle their focusing. For example, you can have a similar implementation:

• https://stackblitz.com/edit/react-leya7tq3-3kmt5qnz?file=app%2Fapp.tsx