[DataGrid] Stop checkbox ripple on blur (#3835)

mui · Feb 11, 2022 · b12b22b · b12b22b
1 parent 996f727
commit b12b22b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx
@@ -46,6 +46,7 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridCellPa
     const classes = useUtilityClasses(ownerState);
     const checkboxElement = React.useRef<HTMLInputElement | null>(null);
 
+    const rippleRef = React.useRef<any>();
     const handleRef = useForkRef(checkboxElement, ref);
     const element = apiRef.current.getCellElement(id, field);
 
@@ -61,9 +62,12 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridCellPa
     }, [element, tabIndex]);
 
     React.useLayoutEffect(() => {
-      if (hasFocus && checkboxElement.current) {
-        const input = checkboxElement.current.querySelector('input')!;
-        input!.focus();
+      if (hasFocus) {
+        const input = checkboxElement.current?.querySelector('input');
+        input?.focus();
+      } else if (rippleRef.current) {
+        // Only available in @mui/material v5.4.1 or later
+        rippleRef.current.stop({});
       }
     }, [hasFocus]);
 
@@ -97,6 +101,7 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridCellPa
         inputProps={{ 'aria-label': label }}
         onKeyDown={handleKeyDown}
         disabled={!isSelectable}
+        touchRippleRef={rippleRef}
         {...rootProps.componentsProps?.baseCheckbox}
         {...other}
       />

diff --git a/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/selection.DataGrid.test.tsx
@@ -32,7 +32,7 @@ function fireClickEvent(cell: HTMLElement) {
 }
 
 describe('<DataGrid /> - Selection', () => {
-  const { render } = createRenderer();
+  const { render, clock } = createRenderer();
 
   const defaultData = getData(4, 2);
 
@@ -450,6 +450,24 @@ describe('<DataGrid /> - Selection', () => {
 
       expect(getSelectedRowIds()).to.deep.equal([]);
     });
+
+    describe('ripple', () => {
+      clock.withFakeTimers();
+
+      it('should keep only one ripple visible when navigating between checkboxes', function test() {
+        if (isJSDOM) {
+          this.skip(); // JSDOM doesn't fire "blur" when .focus is called in another element
+        }
+        render(<TestDataGridSelection checkboxSelection />);
+        const cell = getCell(1, 1);
+        fireEvent.mouseUp(cell);
+        fireEvent.click(cell);
+        fireEvent.keyDown(cell, { key: 'ArrowLeft' });
+        fireEvent.keyDown(getCell(1, 0).querySelector('input'), { key: 'ArrowUp' });
+        clock.runToLast(); // Wait for transition
+        expect(document.querySelectorAll('.MuiTouchRipple-rippleVisible')).to.have.length(1);
+      });
+    });
   });
 
   describe('props: isRowSelectable', () => {