fix click event issue

packages/grid/x-grid-modules/src/gridComponent.tsx

@@ -33,7 +33,7 @@ import { useApi, useColumns, useKeyboard, useRows } from './hooks/root';
 import { useLogger, useLoggerFactory } from './hooks/utils';
 import { debounce } from './utils';
 import { mergeOptions } from './utils/mergeOptions';
-import {useEvents} from "./hooks/root/useEvents";
+import { useEvents } from './hooks/root/useEvents';
 
 /**
  * Data Grid component implementing [[GridComponentProps]].

packages/grid/x-grid-modules/src/hooks/root/useApi.ts

@@ -31,11 +31,11 @@ export function useApi(
 
   const emitEvent = React.useCallback(
     (name: string, ...args: any[]) => {
-      if (apiRef && apiRef.current && isApiInitialised) {
+      if (apiRef && apiRef.current && apiRef.current?.isInitialised) {
         apiRef.current.emit(name, ...args);
       }
     },
-    [apiRef, isApiInitialised],
+    [apiRef],
   );
 
   const registerEvent = React.useCallback(

packages/grid/x-grid-modules/src/hooks/root/useEvents.ts

@@ -33,7 +33,7 @@ import {
 import { useApiMethod } from './useApiMethod';
 import { useApiEventHandler } from './useApiEventHandler';
 import { buildCellParams, buildRowParams } from '../../utils/paramsUtils';
-import {EventsApi} from "../../models/api/eventsApi";
+import { EventsApi } from '../../models/api/eventsApi';
 
 export function useEvents(
   gridRootRef: React.RefObject<HTMLDivElement>,
@@ -120,7 +120,7 @@ export function useEvents(
         apiRef.current!.emitEvent(COLUMN_HEADER_CLICK, eventParams.header);
       }
     },
-    [apiRef.current?.emitEvent, getEventParams],
+    [apiRef, getEventParams],
   );
 
   const onHoverHandler = React.useCallback(
@@ -141,20 +141,20 @@ export function useEvents(
         apiRef.current!.emitEvent(COLUMN_HEADER_HOVER, eventParams.header);
       }
     },
-    [apiRef.current?.emitEvent, getEventParams],
+    [apiRef, getEventParams],
   );
 
   const onUnmount = React.useCallback(
     (handler: (param: any) => void): (() => void) => {
       return apiRef.current!.registerEvent(UNMOUNT, handler);
     },
-    [ apiRef.current?.registerEvent],
+    [apiRef],
   );
   const onResize = React.useCallback(
     (handler: (param: any) => void): (() => void) => {
-      return  apiRef.current!.registerEvent(RESIZE, handler);
+      return apiRef.current!.registerEvent(RESIZE, handler);
     },
-    [ apiRef.current?.registerEvent],
+    [apiRef],
   );
 
   const handleResizeStart = React.useCallback(() => {
@@ -166,8 +166,8 @@ export function useEvents(
   }, [isResizingRef]);
 
   const resize = React.useCallback(() => apiRef.current?.emit(RESIZE), [apiRef]);
-  const eventsApi: EventsApi = {resize, onUnmount, onResize};
-  useApiMethod(apiRef, eventsApi , 'EventsApi');
+  const eventsApi: EventsApi = { resize, onUnmount, onResize };
+  useApiMethod(apiRef, eventsApi, 'EventsApi');
 
   useApiEventHandler(apiRef, COL_RESIZE_START, handleResizeStart);
   useApiEventHandler(apiRef, COL_RESIZE_STOP, handleResizeStop);
@@ -179,8 +179,8 @@ export function useEvents(
   useApiEventHandler(apiRef, ROW_HOVER, options.onRowHover);
 
   React.useEffect(() => {
-    if (gridRootRef && gridRootRef.current &&  apiRef.current?.isInitialised) {
-      logger.debug('Binding events listeners');
+    if (gridRootRef && gridRootRef.current && apiRef.current?.isInitialised) {
+      logger.warn('Binding events listeners');
       const keyDownHandler = getHandler(KEYDOWN_EVENT);
       const keyUpHandler = getHandler(KEYUP_EVENT);
       const gridRootElem = gridRootRef.current;
@@ -194,7 +194,7 @@ export function useEvents(
       const api = apiRef.current!;
 
       return () => {
-        logger.debug('Clearing all events listeners');
+        logger.warn('Clearing all events listeners');
         api.emit(UNMOUNT);
         gridRootElem.removeEventListener(CLICK_EVENT, onClickHandler, { capture: true });
         gridRootElem.removeEventListener(HOVER_EVENT, onHoverHandler, { capture: true });
@@ -203,6 +203,13 @@ export function useEvents(
         api.removeAllListeners();
       };
     }
-
-  }, [gridRootRef, apiRef.current?.isInitialised, getHandler, logger, onClickHandler, onHoverHandler, apiRef]);
+  }, [
+    gridRootRef,
+    apiRef.current?.isInitialised,
+    getHandler,
+    logger,
+    onClickHandler,
+    onHoverHandler,
+    apiRef,
+  ]);
 }

packages/grid/x-grid-modules/src/models/api/coreApi.ts

@@ -1,26 +1,26 @@
-import {EventEmitter} from "events";
+import { EventEmitter } from 'events';
 
 /**
  * The core API interface that is available in the grid [[apiRef]].
  */
 export interface CoreApi extends EventEmitter {
-	/**
-	 * Property that comes true when the grid has its EventEmitter initialised.
-	 */
-	isInitialised: boolean;
-	/**
-	 * Allows to register a handler for an event.
-	 *
-	 * @param event
-	 * @param handler
-	 */
-	registerEvent: (event: string, handler: (param: any) => void) => () => void;
+  /**
+   * Property that comes true when the grid has its EventEmitter initialised.
+   */
+  isInitialised: boolean;
+  /**
+   * Allows to register a handler for an event.
+   *
+   * @param event
+   * @param handler
+   */
+  registerEvent: (event: string, handler: (param: any) => void) => () => void;
 
-	/**
-	 * Allows to emit an event.
-	 *
-	 * @param name
-	 * @param args
-	 */
-	emitEvent: (name: string, ...args: any[])=> void;
-}
+  /**
+   * Allows to emit an event.
+   *
+   * @param name
+   * @param args
+   */
+  emitEvent: (name: string, ...args: any[]) => void;
+}

packages/grid/x-grid-modules/src/models/api/eventsApi.ts

@@ -1,29 +1,29 @@
-import * as React from "react";
+import * as React from 'react';
 
 /**
  * The events API interface that is available in the grid [[apiRef]].
  */
 export interface EventsApi {
-	/**
-	 * The react ref of the grid root container div element.
-	 */
-	rootElementRef?: React.RefObject<HTMLDivElement>;
-	/**
-	 * Add a handler that will be triggered when the component unmount.
-	 *
-	 * @param handler
-	 */
-	onUnmount: (handler: (param: any) => void) => void;
-	/**
-	 * Add a handler that will be triggered when the component resize.
-	 *
-	 * @param handler
-	 */
-	onResize: (handler: (param: any) => void) => void;
-	/**
-	 * Trigger a resize of the component, and recalculation of width and height.
-	 *
-	 * @param handler
-	 */
-	resize: () => void;
-}
+  /**
+   * The react ref of the grid root container div element.
+   */
+  rootElementRef?: React.RefObject<HTMLDivElement>;
+  /**
+   * Add a handler that will be triggered when the component unmount.
+   *
+   * @param handler
+   */
+  onUnmount: (handler: (param: any) => void) => void;
+  /**
+   * Add a handler that will be triggered when the component resize.
+   *
+   * @param handler
+   */
+  onResize: (handler: (param: any) => void) => void;
+  /**
+   * Trigger a resize of the component, and recalculation of width and height.
+   *
+   * @param handler
+   */
+  resize: () => void;
+}

packages/grid/x-grid-modules/src/models/api/gridApi.ts

@@ -1,20 +1,20 @@
-import {RowApi} from './rowApi';
-import {ColumnApi} from './columnApi';
-import {SelectionApi} from './selectionApi';
-import {SortApi} from './sortApi';
-import {PaginationApi} from './paginationApi';
-import {VirtualizationApi} from './virtualizationApi';
-import {CoreApi} from "./coreApi";
-import {EventsApi} from "./eventsApi";
+import { RowApi } from './rowApi';
+import { ColumnApi } from './columnApi';
+import { SelectionApi } from './selectionApi';
+import { SortApi } from './sortApi';
+import { PaginationApi } from './paginationApi';
+import { VirtualizationApi } from './virtualizationApi';
+import { CoreApi } from './coreApi';
+import { EventsApi } from './eventsApi';
 
 /**
  * The full Grid API.
  */
-export type GridApi = RowApi &
+export type GridApi = CoreApi &
+  EventsApi &
+  RowApi &
   ColumnApi &
   SelectionApi &
   SortApi &
   VirtualizationApi &
-  CoreApi &
-	EventsApi &
   PaginationApi;

packages/grid/x-grid-modules/src/models/api/index.ts

@@ -8,4 +8,4 @@ export * from './rowApi';
 export * from './selectionApi';
 export * from './sortApi';
 export * from './virtualizationApi';
-export * from "./coreApi";
+export * from './coreApi';