I want to prevent the focus from leaving the text box during a search.

[Akira Kume]

Hi,

The sample below is a modification of the real-time search sample (https://ej2.syncfusion.com/react/documentation/grid/searching#perform-real-time-search-while-typing) that adds `persistSelection` and checkbox selection.

When I perform the following actions in the sample code, the focus shifts away from the text box during the search. Is there a solution to allow me to continue typing?

1. Select the row with Order ID 10248

2. Enter “v” in the search text box

3. After the search is executed, focus is lost from the text box.

sample:https://stackblitz.com/edit/react-pnxmcxqh

[Joseph Christ Nithin Issack]

Hi Akira,

Greetings from Syncfusion support.

Based on your query, when you select a record in the EJ2 Grid and type some keyword in the search box, the focus is shifted away from the search box and you are unable to continue typing in the search box. However, you can enable the selectionModule.preventFocus property of the EJ2 Grid, before invoking the search method of the EJ2 Grid on each ‘keyup’.

Please refer to the below code example:

 

  const created = () => {

    document

      .getElementById(grid.element.id + '_searchbar')

      .addEventListener('keyup', () => {

        grid.selectionModule.preventFocus = true;

        grid.search(event.target.value);

      });

  };

 

 

Sample: https://stackblitz.com/edit/react-pnxmcxqh-yue7jajz?file=App.js

Regards,

Joseph I.