[DateRangePicker] Open view on click, Enter or Space instead of focus

[alexfauquette]

Fix #4439
Fix #4550

The view did not close on select, because the focus goes back to the input and DateRangePickerInput open the view when focussed, So onOpen was called just after onClose

I took the same behavior as mobile components: open the view on the click event, or when space/Enter is pressed

I did not managed to test the bug. I thought testing how many times onOpen is called would be enough because the bug add a onOpen after closing on select, but when running yarn test:karma I did not get the last call to onOpen

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	255.2	550.6	398.2	373.6	110.067
Sort 100k rows	ms	436.9	856	697.3	696.04	150.279
Select 100k rows	ms	112.9	280.9	146	173.92	59.424
Deselect 100k rows	ms	107.6	212.5	142.1	146.54	35.355

Generated by 🚫 dangerJS against 34fbe38

[flaviendelangle]

Unless they are very complicated, I think it is worth trying to fix #4550 and the fact that clicking on the 2nd input while the 1st is focused closes the panel instead of just switching the currentlySelectingRangeEnd state.

That would allow us to have a global vision of the range pickers modal opening / closing behavior.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[alexfauquette]

This PR fixes #4550 for free since we do not rely anymore on component focus

Not closing the panel when clicking on the second input is a bit more complex.

DesktopTooltipWrapper has a special handleBlur to check of the new focus is still in the component or not. So I modified the Popper such that clickAway calls the onBlur if possible, and onClose if not provided

const handleBlur = () => {
    executeInTheNextEventLoopTick(() => {
      if (
        inputContainerRef.current?.contains(document.activeElement) ||
        popperRef.current?.contains(document.activeElement)
      ) {
        return;
      }

      onDismiss();
    });
  };

I'm wondering if the community component shoudl have the similar behavior, becaus for now, we can not have both view and keyboard interaction.

If I use the same code on DatePicker it allows to do both keyboard and mouse interactions (light theme is with the modification, dark theme is the current doc)

keyboarViewinteractions.mp4

[flaviendelangle]

For the consistence between the range pickers and the other, it's maybe just a legacy thing.
The range picker have been built after and they have a better tooltip management where you can edit the input while the views are opened.
If we successfully stabilizes the range pickers, I would be in favor of applying the same logic to the other pickers.

But maybe not in this PR
I suppose we could even remove DesktopWrapper in favor of DesktopTooltipWrapper

[alexfauquette]

I looked at adding tests, but the focus behavior is too weird, event by setting focus manually on input, it calls onClose in karma test, wherase it does not call it in real browser

[flaviendelangle]

@alexfauquette I don't know if it was the test you were trying to writ
But the following seems to work.

I am using userEvent.mousePress to correctly fire all the events.

    it.only('should not close picker when switching focus from start to end input', () => {
      const onChange = spy();
      const onAccept = spy();
      const onClose = spy();

      render(
          <WrappedDesktopDateRangePicker
              onChange={onChange}
              onAccept={onAccept}
              onClose={onClose}
              initialValue={[
                adapterToUse.date('2018-01-01T00:00:00.000'),
                adapterToUse.date('2018-01-06T00:00:00.000'),
              ]}
          />,
      );

      // Open the picker (already tested)
      openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' });

      // Switch to end date
      openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'end' })
      expect(onChange.callCount).to.equal(0);
      expect(onAccept.callCount).to.equal(0);
      expect(onClose.callCount).to.equal(0);
    })   
    
    it.only('should not close picker when switching focus from end to start input', () => {
      const onChange = spy();
      const onAccept = spy();
      const onClose = spy();

      render(
          <WrappedDesktopDateRangePicker
              onChange={onChange}
              onAccept={onAccept}
              onClose={onClose}
              initialValue={[
                adapterToUse.date('2018-01-01T00:00:00.000'),
                adapterToUse.date('2018-01-06T00:00:00.000'),
              ]}
          />,
      );

      // Open the picker (already tested)
      openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'end' });

      // Switch to start date
      openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' })
      expect(onChange.callCount).to.equal(0);
      expect(onAccept.callCount).to.equal(0);
      expect(onClose.callCount).to.equal(0);
    })