How to remove the active state of the combobox after clicking outside the grid or in the empty space inside the grid

[Abhishek]

I am using combobox inside the kendo grid. the problem i am facing is when i select the combobox & if i click outside the grid or inside the empty space in the grid, the combo box is still in active state. i want to remove the active state of the combobox after clicking outside the grid or in the empty space of the grid 

[Vessy]

Hello, Abhishek,

I tested the described scenario but the Combobox is properly closed at my end when I click outside the cell containing it. Can you compare the setup in the sample below with your actual ones and see how to differ?

• https://stackblitz.com/edit/react-yxssn8-1mgwhx?file=app%2Fapp.tsx 

If comparing is not enough to pinpoint the issue, can yo, please, update the sample above up to a point where the issue occurs and send it back so I can examine it further?

Kind regards,
Vessy
Progress Telerik

[Abhishek]

In My case, i have moved all my customCells to a new file & passing the data to the file using grid context. After moving the custom cells to new file, i am facing issue with exitedit method. can you please help me on this

[Vessy]

Sure, Abhishek, I will be glad to help you but I will need to examine the exact setup leading to the problem in order to be able to assist you further on this. Can you, please, prepare a runnable Stackblitz sample where I can reproduce the problem and examine its implementation at my end?

You can use the sample provided in my previous reply as a base if it will be easier for you.

[Abhishek]

Hi. i am attaching the sample link. If i click on the dropdown or any other custom cell & when i click out side without changing any value, the dropdown is still in active state. Please help on this.

https://stackblitz.com/edit/react-czmt6w-ikztrs?file=app%2Frenderers.jsx,app%2Fmain.jsx,app%2FcustomCells.jsx

[Vessy]

Hi, Abhishek,

To ensure that the DropDownCell exits edit mode when you click outside of the grid, you'll need to detect clicks outside the grid and trigger the exitEdit function. You can do it by handling the mousedown event of the document and checking if the click happened outside the grid, and if it did, we’ll call the exitEdit function.

You can see a sample demonstrating this approach here:

• https://stackblitz.com/edit/react-czmt6w-ikw43g?file=app%2Frenderers.jsx,app%2Fmain.jsx 

  React.useEffect(() => {
    const handleClickOutside = (event) => {
      // Check if the click is outside the grid container
      if (gridRef.current && !gridRef.current?.contains(event.target)) {
        exitEdit();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

[Abhishek]

Hi Vessey, Thank you for the prompt response. Actually i have tried this approach. When there were more than 200 records in the grid, incell editing/typing in the cell was too slow. So we tried debouncing technique where in we gave some timeout of 3 seconds after the user types. But the above mentioned code block is impacting the debouncing code. if the user types something & within a second if he clicks outside, then old data is only getting persisted in the textbox.

[Vessy]

Hi, Abhishek,

We tested the scenario further and found that the root of the problem is actually that the DropDownList is not focussed when the cell enters in edit mode. Forcing the focusing of the DropDownList component initially should boost the performance of the page and will allow you to exit the editing when clicking outside the Grid in the same time:

• https://stackblitz.com/edit/react-czmt6w-i1jfua?file=app%2Frenderers.jsx,app%2Fmain.jsx,app%2FcustomCells.jsx 

[Abhishek]

I noticed 1 issue in the above mentioned example. if u select the dropdown & dont change any value & if u click outside, the dropdown is still in active state. 1st row is still active even though i clicked outside

[Abhishek]

Any update on this issue??