[ClickAwayListener] Misc cleanup

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

@@ -28,7 +28,7 @@ For instance, if you need to hide a menu when people click anywhere else on your
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name required">children&nbsp;*</span> | <span class="prop-type">element</span> |  | The wrapped element.<br>⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). |
-| <span class="prop-name">disableReactTree</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | The mouse event to listen to. You can disable the listener by providing `false`. |
+| <span class="prop-name">disableReactTree</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled. |
 | <span class="prop-name">mouseEvent</span> | <span class="prop-type">'onClick'<br>&#124;&nbsp;'onMouseDown'<br>&#124;&nbsp;'onMouseUp'<br>&#124;&nbsp;false</span> | <span class="prop-default">'onClick'</span> | The mouse event to listen to. You can disable the listener by providing `false`. |
 | <span class="prop-name required">onClickAway&nbsp;*</span> | <span class="prop-type">func</span> |  | Callback fired when a "click away" event is detected. |
 | <span class="prop-name">touchEvent</span> | <span class="prop-type">'onTouchEnd'<br>&#124;&nbsp;'onTouchStart'<br>&#124;&nbsp;false</span> | <span class="prop-default">'onTouchEnd'</span> | The touch event to listen to. You can disable the listener by providing `false`. |

packages/material-ui/src/ClickAwayListener/ClickAwayListener.d.ts

@@ -6,7 +6,7 @@ export interface ClickAwayListenerProps {
    */
   children: React.ReactNode;
   /**
-   * The mouse event to listen to. You can disable the listener by providing `false`.
+   * If `true`, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled.
    */
   disableReactTree?: boolean;
   /**

packages/material-ui/src/ClickAwayListener/ClickAwayListener.js

@@ -159,7 +159,7 @@ ClickAwayListener.propTypes = {
    */
   children: elementAcceptingRef.isRequired,
   /**
-   * The mouse event to listen to. You can disable the listener by providing `false`.
+   * If `true`, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled.
    */
   disableReactTree: PropTypes.bool,
   /**

packages/material-ui/src/ClickAwayListener/ClickAwayListener.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createClientRender, fireEvent } from 'test/utils/createClientRender';
+import { createClientRender, fireEvent, screen } from 'test/utils/createClientRender';
 import Portal from '../Portal';
 import ClickAwayListener from './ClickAwayListener';
 
@@ -219,4 +219,50 @@ describe('<ClickAwayListener />', () => {
     fireEvent.click(document.body);
     expect(handleClickAway.callCount).to.equal(0);
   });
+
+  [
+    ['onClick', false],
+    ['onClick', true],
+    ['onClickCapture', false],
+    ['onClickCapture', true],
+  ].forEach(([eventName, disableReactTree]) => {
+    it(`when 'disableRectTree=${disableReactTree}' ${eventName} triggers onClickAway if an outside target is removed`, () => {
+      const handleClickAway = spy();
+      function Test() {
+        const [buttonShown, hideButton] = React.useReducer(() => false, true);
+
+        return (
+          <React.Fragment>
+            {buttonShown && <button {...{ [eventName]: hideButton }} type="button" />}
+            <ClickAwayListener onClickAway={handleClickAway} disableReactTree={disableReactTree}>
+              <div />
+            </ClickAwayListener>
+          </React.Fragment>
+        );
+      }
+      render(<Test />);
+
+      screen.getByRole('button').click();
+
+      expect(handleClickAway.callCount).to.equal(1);
+    });
+
+    it(`when 'disableRectTree=${disableReactTree}' ${eventName} does not trigger onClickAway if an inside target is removed`, () => {
+      const handleClickAway = spy();
+      function Test() {
+        const [buttonShown, hideButton] = React.useReducer(() => false, true);
+
+        return (
+          <ClickAwayListener onClickAway={handleClickAway} disableReactTree={disableReactTree}>
+            <div>{buttonShown && <button {...{ [eventName]: hideButton }} type="button" />}</div>
+          </ClickAwayListener>
+        );
+      }
+      render(<Test />);
+
+      screen.getByRole('button').click();
+
+      expect(handleClickAway.callCount).to.equal(0);
+    });
+  });
 });