[pickers] Dismiss on clickaway when using the desktop variant

mui · Jan 27, 2021 · e5f6e1b · e5f6e1b
1 parent 0645524
commit e5f6e1b
Show file tree

Hide file tree

Showing 5 changed files with 370 additions and 28 deletions.
diff --git a/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx b/packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx
@@ -62,6 +62,42 @@ describe('<DesktopDatePicker />', () => {
     expect(screen.queryByRole('dialog')).not.to.equal(null);
   });
 
+  it('closes on clickaway', () => {
+    const handleClose = spy();
+    render(
+      <DesktopDatePicker
+        onChange={() => {}}
+        renderInput={(params) => <TextField {...params} />}
+        value={null}
+        open
+        onClose={handleClose}
+        TransitionComponent={FakeTransitionComponent}
+      />,
+    );
+
+    fireEvent.click(document.body);
+
+    expect(handleClose.callCount).to.equal(1);
+  });
+
+  it('does not close on click inside', () => {
+    const handleClose = spy();
+    render(
+      <DesktopDatePicker
+        onChange={() => {}}
+        renderInput={(params) => <TextField {...params} />}
+        value={null}
+        open
+        onClose={handleClose}
+        TransitionComponent={FakeTransitionComponent}
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText('Next month'));
+
+    expect(handleClose.callCount).to.equal(0);
+  });
+
   it('accepts date on day button click', () => {
     const onChangeMock = spy();
     render(
@@ -172,4 +208,32 @@ describe('<DesktopDatePicker />', () => {
 
     expect(getByMuiTest('picker-toolbar')).toBeVisible();
   });
+
+  describe('prop: PopperProps', () => {
+    it('forwards onClick and onTouchStart', () => {
+      const handleClick = spy();
+      const handleTouchStart = spy();
+      render(
+        <DesktopDatePicker
+          open
+          onChange={() => {}}
+          PopperProps={{
+            onClick: handleClick,
+            onTouchStart: handleTouchStart,
+            // @ts-expect-error `data-*` attributes are not recognized in props objects
+            'data-testid': 'popper',
+          }}
+          renderInput={(params) => <TextField {...params} />}
+          value={null}
+        />,
+      );
+      const popper = screen.getByTestId('popper');
+
+      fireEvent.click(popper);
+      fireEvent.touchStart(popper);
+
+      expect(handleClick.callCount).to.equal(1);
+      expect(handleTouchStart.callCount).to.equal(1);
+    });
+  });
 });
diff --git a/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx b/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.test.tsx
@@ -31,6 +31,40 @@ describe('<DesktopDateRangePicker />', () => {
     }
   });
 
+  it('closes on clickaway', () => {
+    const handleClose = spy();
+    render(
+      <DesktopDateRangePicker
+        onChange={() => {}}
+        renderInput={(params) => <TextField {...params} />}
+        value={[null, null]}
+        open
+        onClose={handleClose}
+      />,
+    );
+
+    fireEvent.click(document.body);
+
+    expect(handleClose.callCount).to.equal(1);
+  });
+
+  it('does not close on click inside', () => {
+    const handleClose = spy();
+    render(
+      <DesktopDateRangePicker
+        onChange={() => {}}
+        renderInput={(params) => <TextField {...params} />}
+        value={[null, null]}
+        open
+        onClose={handleClose}
+      />,
+    );
+
+    fireEvent.click(screen.getAllByLabelText('Previous month')[0]);
+
+    expect(handleClose.callCount).to.equal(0);
+  });
+
   it('allows to select date range end-to-end', () => {
     function RangePickerTest() {
       const [range, changeRange] = React.useState<DateRange<Date>>([
@@ -313,4 +347,32 @@ describe('<DesktopDateRangePicker />', () => {
 
     expect(getAllByMuiTest('pickers-calendar')).to.have.length(3);
   });
+
+  describe('prop: PopperProps', () => {
+    it('forwards onClick and onTouchStart', () => {
+      const handleClick = spy();
+      const handleTouchStart = spy();
+      render(
+        <DesktopDateRangePicker
+          open
+          onChange={() => {}}
+          PopperProps={{
+            onClick: handleClick,
+            onTouchStart: handleTouchStart,
+            // @ts-expect-error `data-*` attributes are not recognized in props objects
+            'data-testid': 'popper',
+          }}
+          renderInput={(params) => <TextField {...params} />}
+          value={[null, null]}
+        />,
+      );
+      const popper = screen.getByTestId('popper');
+
+      fireEvent.click(popper);
+      fireEvent.touchStart(popper);
+
+      expect(handleClick.callCount).to.equal(1);
+      expect(handleTouchStart.callCount).to.equal(1);
+    });
+  });
 });
diff --git a/packages/material-ui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.test.tsx b/packages/material-ui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import TextField from '@material-ui/core/TextField';
 import { expect } from 'chai';
-import { useFakeTimers, SinonFakeTimers } from 'sinon';
+import { useFakeTimers, SinonFakeTimers, spy } from 'sinon';
 import { fireEvent, screen } from 'test/utils';
 import 'dayjs/locale/ru';
 import dayjs from 'dayjs';
@@ -22,7 +22,7 @@ describe('<DesktopDateTimePicker />', () => {
 
   const render = createPickerRender({ strict: false });
 
-  it('opens dialog on calendar button click for Mobile mode', () => {
+  it('opens dialog on calendar button click', () => {
     render(
       <DesktopDateTimePicker
         value={null}
@@ -35,6 +35,40 @@ describe('<DesktopDateTimePicker />', () => {
     expect(screen.getByRole('dialog')).toBeVisible();
   });
 
+  it('closes on clickaway', () => {
+    const handleClose = spy();
+    render(
+      <DesktopDateTimePicker
+        onChange={() => {}}
+        renderInput={(params) => <TextField {...params} />}
+        value={null}
+        open
+        onClose={handleClose}
+      />,
+    );
+
+    fireEvent.click(document.body);
+
+    expect(handleClose.callCount).to.equal(1);
+  });
+
+  it('does not close on click inside', () => {
+    const handleClose = spy();
+    render(
+      <DesktopDateTimePicker
+        onChange={() => {}}
+        renderInput={(params) => <TextField {...params} />}
+        value={null}
+        open
+        onClose={handleClose}
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText('pick time'));
+
+    expect(handleClose.callCount).to.equal(0);
+  });
+
   it('prop: dateAdapter – allows to override date adapter with prop', () => {
     render(
       <DesktopDateTimePicker
@@ -132,4 +166,32 @@ describe('<DesktopDateTimePicker />', () => {
     fireEvent.click(screen.getByLabelText('open next view'));
     expect(screen.getByLabelText('open next view')).to.have.attribute('disabled');
   });
+
+  describe('prop: PopperProps', () => {
+    it('forwards onClick and onTouchStart', () => {
+      const handleClick = spy();
+      const handleTouchStart = spy();
+      render(
+        <DesktopDateTimePicker
+          open
+          onChange={() => {}}
+          PopperProps={{
+            onClick: handleClick,
+            onTouchStart: handleTouchStart,
+            // @ts-expect-error `data-*` attributes are not recognized in props objects
+            'data-testid': 'popper',
+          }}
+          renderInput={(params) => <TextField {...params} />}
+          value={null}
+        />,
+      );
+      const popper = screen.getByTestId('popper');
+
+      fireEvent.click(popper);
+      fireEvent.touchStart(popper);
+
+      expect(handleClick.callCount).to.equal(1);
+      expect(handleTouchStart.callCount).to.equal(1);
+    });
+  });
 });
diff --git a/packages/material-ui-lab/src/DesktopTimePicker/DesktopTimePicker.test.tsx b/packages/material-ui-lab/src/DesktopTimePicker/DesktopTimePicker.test.tsx
@@ -30,6 +30,40 @@ describe('<DesktopTimePicker />', () => {
     }),
   );
 
+  it('closes on clickaway', () => {
+    const handleClose = spy();
+    render(
+      <DesktopTimePicker
+        onChange={() => {}}
+        renderInput={(params) => <TextField {...params} />}
+        value={null}
+        open
+        onClose={handleClose}
+      />,
+    );
+
+    fireEvent.click(document.body);
+
+    expect(handleClose.callCount).to.equal(1);
+  });
+
+  it('does not close on click inside', () => {
+    const handleClose = spy();
+    render(
+      <DesktopTimePicker
+        onChange={() => {}}
+        renderInput={(params) => <TextField {...params} />}
+        value={null}
+        open
+        onClose={handleClose}
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText('open next view'));
+
+    expect(handleClose.callCount).to.equal(0);
+  });
+
   it('allows to navigate between timepicker views using arrow switcher', () => {
     render(
       <DesktopTimePicker
@@ -108,4 +142,32 @@ describe('<DesktopTimePicker />', () => {
       });
     });
   });
+
+  describe('prop: PopperProps', () => {
+    it('forwards onClick and onTouchStart', () => {
+      const handleClick = spy();
+      const handleTouchStart = spy();
+      render(
+        <DesktopTimePicker
+          open
+          onChange={() => {}}
+          PopperProps={{
+            onClick: handleClick,
+            onTouchStart: handleTouchStart,
+            // @ts-expect-error `data-*` attributes are not recognized in props objects
+            'data-testid': 'popper',
+          }}
+          renderInput={(params) => <TextField {...params} />}
+          value={null}
+        />,
+      );
+      const popper = screen.getByTestId('popper');
+
+      fireEvent.click(popper);
+      fireEvent.touchStart(popper);
+
+      expect(handleClick.callCount).to.equal(1);
+      expect(handleTouchStart.callCount).to.equal(1);
+    });
+  });
 });