Is there a way to stop editing mode to next cell on Tab in ag-grid react?

Pavan S 0
Viewed 19

The default behaviour of ag-grid-react Tab key down as given in the documentation is :

Tab Key Down: Editing will stop, accepting changes, and editing will move to the next cell.

I want to stop moving this editing mode to the next cell instead I just want to accept the changes and navigate to the next cell without having the editing mode.

Please help me with this.

ag-grid-react tabs
1 Answers

to achieve this we use the column property suppressKeyboardEvent. We check if Tab was pressed and tell the grid to stop editing using the grid API stopEditing

 const onSuppressKeyboardEvent = params => {
   let isTabKey = params.event.key === 'Tab';
   if (isTabKey) gridRef.current.api.stopEditing();
 };

 const defaultColDef = useMemo(() => {
   return {
     editable: true,
     suppressKeyboardEvent: onSuppressKeyboardEvent,
   };
 }, []);

You can find a live example here: https://plnkr.co/edit/yOwI0y0FHaGnzc3P?open=index.jsx

ChefNoName0
Related