[ClickAwayListener] Trigger in mouseup instead of click

docs/pages/api-docs/click-away-listener.json

@@ -8,7 +8,7 @@
         "name": "enum",
         "description": "'onClick'<br>&#124;&nbsp;'onMouseDown'<br>&#124;&nbsp;'onMouseUp'<br>&#124;&nbsp;false"
       },
-      "default": "'onClick'"
+      "default": "'onMouseUp'"
     },
     "touchEvent": {
       "type": {

packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js

@@ -32,6 +32,35 @@ describe('<ClickAwayListener />', () => {
     expect(container.querySelectorAll('span').length).to.equal(1);
   });
 
+  it('should not be highlighted on tap', function test() {
+    if (
+      /jsdom/.test(window.navigator.userAgent) ||
+      !('webkitTapHighlightColor' in document.body.style)
+    ) {
+      this.skip();
+    }
+
+    const initialTapHighlightColor = window.getComputedStyle(document.body).webkitTapHighlightColor;
+    const transparentColor = 'rgba(0, 0, 0, 0)';
+    render(
+      <ClickAwayListener onClickAway={() => {}}>
+        <div data-testid="child">
+          Not tappable
+          <button data-testid="tappable">tappable</button>
+        </div>
+      </ClickAwayListener>,
+    );
+
+    if (typeof screen.getByTestId('child').onclick === 'function') {
+      expect(screen.getByTestId('child')).toHaveComputedStyle({
+        webkitTapHighlightColor: transparentColor,
+      });
+    }
+    expect(screen.getByTestId('tappable')).toHaveComputedStyle({
+      webkitTapHighlightColor: initialTapHighlightColor,
+    });
+  });
+
   describe('prop: onClickAway', () => {
     it('should be called when clicking away', () => {
       const handleClickAway = spy();
@@ -41,7 +70,7 @@ describe('<ClickAwayListener />', () => {
         </ClickAwayListener>,
       );
 
-      fireEvent.click(document.body);
+      fireEvent.mouseUp(document.body);
       expect(handleClickAway.callCount).to.equal(1);
       expect(handleClickAway.args[0].length).to.equal(1);
     });
@@ -54,7 +83,7 @@ describe('<ClickAwayListener />', () => {
         </ClickAwayListener>,
       );
 
-      fireEvent.click(container.querySelector('span'));
+      fireEvent.mouseUp(container.querySelector('span'));
       expect(handleClickAway.callCount).to.equal(0);
     });
 
@@ -66,12 +95,12 @@ describe('<ClickAwayListener />', () => {
         </ClickAwayListener>,
       );
       const preventDefault = (event) => event.preventDefault();
-      document.body.addEventListener('click', preventDefault);
+      document.body.addEventListener('mouseup', preventDefault);
 
-      fireEvent.click(document.body);
+      fireEvent.mouseUp(document.body);
       expect(handleClickAway.callCount).to.equal(1);
 
-      document.body.removeEventListener('click', preventDefault);
+      document.body.removeEventListener('mouseup', preventDefault);
     });
 
     it('should not be called when clicking inside a portaled element', () => {
@@ -86,7 +115,7 @@ describe('<ClickAwayListener />', () => {
         </ClickAwayListener>,
       );
 
-      fireEvent.click(getByText('Inside a portal'));
+      fireEvent.mouseDown(getByText('Inside a portal'));
       expect(handleClickAway.callCount).to.equal(0);
     });
 
@@ -102,6 +131,7 @@ describe('<ClickAwayListener />', () => {
         </ClickAwayListener>,
       );
 
+      fireEvent.mouseUp(getByText('Inside a portal'));
       fireEvent.click(getByText('Inside a portal'));
       expect(handleClickAway.callCount).to.equal(1);
     });
@@ -141,13 +171,13 @@ describe('<ClickAwayListener />', () => {
         </ClickAwayListener>,
       );
 
-      fireEvent.click(getByText('Outside a portal'));
+      fireEvent.mouseDown(getByText('Outside a portal'));
       expect(handleClickAway.callCount).to.equal(0);
 
-      fireEvent.click(getByText('Stop all inside a portal'));
+      fireEvent.mouseDown(getByText('Stop all inside a portal'));
       expect(handleClickAway.callCount).to.equal(0);
 
-      fireEvent.click(getByText('Stop inside a portal'));
+      fireEvent.mouseDown(getByText('Stop inside a portal'));
       // undesired behavior in React 16
       expect(handleClickAway.callCount).to.equal(React.version.startsWith('16') ? 1 : 0);
     });
@@ -173,6 +203,7 @@ describe('<ClickAwayListener />', () => {
         }
         render(<Test />);
 
+        fireDiscreteEvent.mouseUp(screen.getByTestId('trigger'));
         fireDiscreteEvent.click(screen.getByTestId('trigger'));
 
         expect(screen.getByTestId('child')).not.to.equal(null);
@@ -244,7 +275,7 @@ describe('<ClickAwayListener />', () => {
       fireDiscreteEvent.mouseUp(mouseUpTarget);
       fireDiscreteEvent.click(clickTarget);
 
-      expect(onClickAway.callCount).to.equal(1);
+      expect(onClickAway.callCount).to.equal(0);
     });
   });
 
@@ -256,7 +287,7 @@ describe('<ClickAwayListener />', () => {
           <span />
         </ClickAwayListener>,
       );
-      fireEvent.click(document.body);
+      fireEvent.mouseUp(document.body);
       expect(handleClickAway.callCount).to.equal(0);
     });
 
@@ -328,7 +359,7 @@ describe('<ClickAwayListener />', () => {
         <Child />
       </ClickAwayListener>,
     );
-    fireEvent.click(document.body);
+    fireEvent.mouseUp(document.body);
     expect(handleClickAway.callCount).to.equal(0);
   });
 
@@ -359,7 +390,10 @@ describe('<ClickAwayListener />', () => {
       render(<Test />);
 
       act(() => {
-        screen.getByRole('button').click();
+        const target = screen.getByRole('button');
+        fireEvent.mouseDown(target);
+        fireEvent.mouseUp(target);
+        target.click();
       });
 
       expect(handleClickAway.callCount).to.equal(1);
@@ -384,7 +418,10 @@ describe('<ClickAwayListener />', () => {
       render(<Test />);
 
       act(() => {
-        screen.getByRole('button').click();
+        const target = screen.getByRole('button');
+        fireEvent.mouseDown(target);
+        fireEvent.mouseUp(target);
+        target.click();
       });
 
       expect(handleClickAway.callCount).to.equal(0);

packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx

@@ -38,7 +38,7 @@ export interface ClickAwayListenerProps {
   disableReactTree?: boolean;
   /**
    * The mouse event to listen to. You can disable the listener by providing `false`.
-   * @default 'onClick'
+   * @default 'onMouseUp'
    */
   mouseEvent?: ClickAwayMouseEventHandler | false;
   /**
@@ -69,7 +69,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {
   const {
     children,
     disableReactTree = false,
-    mouseEvent = 'onClick',
+    mouseEvent = 'onMouseUp',
     onClickAway,
     touchEvent = 'onTouchEnd',
   } = props;
@@ -227,7 +227,7 @@ ClickAwayListener.propTypes /* remove-proptypes */ = {
   disableReactTree: PropTypes.bool,
   /**
    * The mouse event to listen to. You can disable the listener by providing `false`.
-   * @default 'onClick'
+   * @default 'onMouseUp'
    */
   mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', false]),
   /**

packages/mui-material/src/Snackbar/Snackbar.test.js

@@ -42,11 +42,10 @@ describe('<Snackbar />', () => {
       const handleClose = spy();
       render(<Snackbar open onClose={handleClose} message="message" />);
 
-      const event = new window.Event('click', { view: window, bubbles: true, cancelable: true });
-      document.body.dispatchEvent(event);
+      fireEvent.mouseUp(document.body);
 
       expect(handleClose.callCount).to.equal(1);
-      expect(handleClose.args[0]).to.deep.equal([event, 'clickaway']);
+      expect(handleClose.args[0][1]).to.deep.equal('clickaway');
     });
 
     it('should be called when pressing Escape', () => {