From 40b8db728f47468c36035d772b3dcdbd39575918 Mon Sep 17 00:00:00 2001 From: Simon Jentsch Date: Tue, 16 Feb 2021 17:27:38 +0100 Subject: [PATCH] Pickers change This is a copy of upstream PR https://github.com/mui-org/material-ui/pull/24315 --- .../DateRangePickerDay.test.tsx | 4 +- .../src/DayPicker/PickersCalendar.tsx | 33 +---- .../src/DayPicker/useCalendarState.tsx | 6 +- .../src/PickersDay/PickersDay.test.tsx | 45 +++++-- .../src/PickersDay/PickersDay.tsx | 114 ++++++++++------- .../StaticDatePickerKeyboard.test.tsx | 2 - .../src/YearPicker/PickersYear.tsx | 32 ++--- .../src/YearPicker/YearPicker.test.tsx | 13 +- .../src/YearPicker/YearPicker.tsx | 117 ++++++++++-------- .../src/internal/pickers/PickersPopper.tsx | 14 +-- .../pickers/hooks/useCanAutoFocus.tsx | 28 ----- .../wrappers/DesktopTooltipWrapper.tsx | 35 ++---- .../pickers/wrappers/DesktopWrapper.tsx | 27 ++-- 13 files changed, 224 insertions(+), 246 deletions(-) delete mode 100644 packages/material-ui-lab/src/internal/pickers/hooks/useCanAutoFocus.tsx diff --git a/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.test.tsx b/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.test.tsx index 06f7f5aa017332..e182aa5039b439 100644 --- a/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.test.tsx +++ b/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.test.tsx @@ -4,7 +4,7 @@ import LocalizationProvider from '@material-ui/lab/LocalizationProvider'; import DateRangePickerDay from '@material-ui/lab/DateRangePickerDay'; import { adapterToUse, AdapterClassToUse } from '../internal/pickers/test-utils'; -describe('', () => { +describe('', () => { const mount = createMount(); let classes: Record; @@ -20,7 +20,6 @@ describe('', () => { day={adapterToUse.date()} outsideCurrentMonth={false} selected - focused onDaySelect={() => {}} isHighlighting isPreviewing @@ -37,7 +36,6 @@ describe('', () => { day={adapterToUse.date()} outsideCurrentMonth={false} selected - focused onDaySelect={() => {}} isHighlighting isPreviewing diff --git a/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx b/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx index 5290669b9417c6..4260f27571a82c 100644 --- a/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx +++ b/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx @@ -1,13 +1,12 @@ import * as React from 'react'; import clsx from 'clsx'; import Typography from '@material-ui/core/Typography'; -import { StyleRules, WithStyles, withStyles, useTheme, Theme } from '@material-ui/core/styles'; +import { StyleRules, WithStyles, withStyles, Theme } from '@material-ui/core/styles'; import PickersDay, { PickersDayProps } from '../PickersDay/PickersDay'; import { useUtils, useNow } from '../internal/pickers/hooks/useUtils'; import { PickerOnChangeFn } from '../internal/pickers/hooks/useViews'; import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions'; import { PickerSelectionState } from '../internal/pickers/hooks/usePickerState'; -import { useGlobalKeyDown, keycode } from '../internal/pickers/hooks/useKeyDown'; import SlideTransition, { SlideDirection, SlideTransitionProps } from './PickersSlideTransition'; export interface ExportedCalendarProps @@ -46,7 +45,7 @@ export interface ExportedCalendarProps } export interface PickersCalendarProps extends ExportedCalendarProps { - date: TDate | null | Array; + date: TDate | [TDate | null, TDate | null] | null; isDateDisabled: (day: TDate) => boolean; slideDirection: SlideDirection; currentMonth: TDate; @@ -132,8 +131,6 @@ function PickersCalendar(props: PickersCalendarProps & WithStyles< const now = useNow(); const utils = useUtils(); - const theme = useTheme(); - const handleDaySelect = React.useCallback( (day: TDate, isFinish: PickerSelectionState = 'finish') => { // TODO possibly buggy line figure out and add tests @@ -144,22 +141,6 @@ function PickersCalendar(props: PickersCalendarProps & WithStyles< [date, now, onChange, utils], ); - const initialDate = Array.isArray(date) ? date[0] : date; - - const nowFocusedDay = focusedDay || initialDate || now; - useGlobalKeyDown(Boolean(allowKeyboardControl), { - [keycode.ArrowUp]: () => changeFocusedDay(utils.addDays(nowFocusedDay, -7)), - [keycode.ArrowDown]: () => changeFocusedDay(utils.addDays(nowFocusedDay, 7)), - [keycode.ArrowLeft]: () => - changeFocusedDay(utils.addDays(nowFocusedDay, theme.direction === 'ltr' ? -1 : 1)), - [keycode.ArrowRight]: () => - changeFocusedDay(utils.addDays(nowFocusedDay, theme.direction === 'ltr' ? 1 : -1)), - [keycode.Home]: () => changeFocusedDay(utils.startOfWeek(nowFocusedDay)), - [keycode.End]: () => changeFocusedDay(utils.endOfWeek(nowFocusedDay)), - [keycode.PageUp]: () => changeFocusedDay(utils.getNextMonth(nowFocusedDay)), - [keycode.PageDown]: () => changeFocusedDay(utils.getPreviousMonth(nowFocusedDay)), - }); - const currentMonthNumber = utils.getMonth(currentMonth); const selectedDates = (Array.isArray(date) ? date : [date]) .filter(Boolean) @@ -202,10 +183,10 @@ function PickersCalendar(props: PickersCalendarProps & WithStyles< disabled: isDateDisabled(day), allowKeyboardControl, allowSameDateSelection, - focused: + autoFocus: allowKeyboardControl && - Boolean(focusedDay) && - utils.isSameDay(day, nowFocusedDay), + focusedDay !== null && + utils.isSameDay(day, focusedDay), today: utils.isSameDay(day, now), outsideCurrentMonth: utils.getMonth(day) !== currentMonthNumber, selected: selectedDates.some( @@ -213,10 +194,6 @@ function PickersCalendar(props: PickersCalendarProps & WithStyles< ), disableHighlightToday, showDaysOutsideCurrentMonth, - focusable: - allowKeyboardControl && - Boolean(nowFocusedDay) && - utils.toJsDate(nowFocusedDay).getDate() === utils.toJsDate(day).getDate(), onDayFocus: changeFocusedDay, onDaySelect: handleDaySelect, }; diff --git a/packages/material-ui-lab/src/DayPicker/useCalendarState.tsx b/packages/material-ui-lab/src/DayPicker/useCalendarState.tsx index 7704b58c4e8b81..a6619a97991b6b 100644 --- a/packages/material-ui-lab/src/DayPicker/useCalendarState.tsx +++ b/packages/material-ui-lab/src/DayPicker/useCalendarState.tsx @@ -44,6 +44,10 @@ export const createCalendarStateReducer = ( }; case 'changeFocusedDay': { + if (state.focusedDay !== null && utils.isSameDay(action.focusedDay, state.focusedDay)) { + return state; + } + const needMonthSwitch = Boolean(action.focusedDay) && !disableSwitchToMonthOnDayFocus && @@ -99,7 +103,7 @@ export function useCalendarState({ const [calendarState, dispatch] = React.useReducer(reducerFn, { isMonthSwitchingAnimating: false, - focusedDay: date, + focusedDay: date || now, currentMonth: utils.startOfMonth(date ?? defaultCalendarMonth ?? now), slideDirection: 'left', }); diff --git a/packages/material-ui-lab/src/PickersDay/PickersDay.test.tsx b/packages/material-ui-lab/src/PickersDay/PickersDay.test.tsx index e3df2c08e0a357..5c887dc9bec29e 100644 --- a/packages/material-ui-lab/src/PickersDay/PickersDay.test.tsx +++ b/packages/material-ui-lab/src/PickersDay/PickersDay.test.tsx @@ -1,26 +1,25 @@ import * as React from 'react'; -import { getClasses, createMount, describeConformance } from 'test/utils'; -import LocalizationProvider from '@material-ui/lab/LocalizationProvider'; +import { expect } from 'chai'; +import { spy } from 'sinon'; +import { getClasses, describeConformance, fireEvent, screen } from 'test/utils'; import PickersDay from '@material-ui/lab/PickersDay'; -import { adapterToUse, AdapterClassToUse } from '../internal/pickers/test-utils'; +import { + adapterToUse, + createPickerMount, + createPickerRender, +} from '../internal/pickers/test-utils'; describe('', () => { - const mount = createMount(); + const mount = createPickerMount(); + const render = createPickerRender(); let classes: Record; - const localizedMount = (node: React.ReactNode) => { - return mount( - {node}, - ); - }; - before(() => { classes = getClasses( {}} />, ); @@ -31,16 +30,36 @@ describe('', () => { day={adapterToUse.date()} outsideCurrentMonth={false} selected - focused onDaySelect={() => {}} />, () => ({ classes, inheritComponent: 'button', - mount: localizedMount, + mount, refInstanceof: window.HTMLButtonElement, // cannot test reactTestRenderer because of required context skip: ['componentProp', 'reactTestRenderer'], }), ); + + it('selects the date on click, Enter and Space', () => { + const handleDaySelect = spy(); + const day = adapterToUse.date(); + render(); + const targetDay = screen.getByRole('button', { + name: `${adapterToUse.format(day, 'fullDate')}`, + }); + + // A native button implies Enter and Space keydown behavior + // These keydown events only trigger click behavior if they're trusted (programmatically dispatched events aren't trusted). + // If this breaks, make sure to add tests for + // - fireEvent.keyDown(targetDay, { key: 'Enter' }) + // - fireEvent.keyUp(targetDay, { key: 'Space' }) + expect(targetDay.tagName).to.equal('BUTTON'); + + fireEvent.click(targetDay); + + expect(handleDaySelect.callCount).to.equal(1); + expect(handleDaySelect.args[0][0]).toEqualDateTime(day); + }); }); diff --git a/packages/material-ui-lab/src/PickersDay/PickersDay.tsx b/packages/material-ui-lab/src/PickersDay/PickersDay.tsx index 7742e1891e4f12..0097bf186985ed 100644 --- a/packages/material-ui-lab/src/PickersDay/PickersDay.tsx +++ b/packages/material-ui-lab/src/PickersDay/PickersDay.tsx @@ -2,13 +2,18 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import ButtonBase, { ButtonBaseProps } from '@material-ui/core/ButtonBase'; -import { StyleRules, MuiStyles, WithStyles, withStyles, alpha } from '@material-ui/core/styles'; +import { + StyleRules, + MuiStyles, + useTheme, + WithStyles, + withStyles, + alpha, +} from '@material-ui/core/styles'; import { useForkRef } from '@material-ui/core/utils'; import { ExtendMui } from '../internal/pickers/typings/helpers'; -import { onSpaceOrEnter } from '../internal/pickers/utils'; import { useUtils } from '../internal/pickers/hooks/useUtils'; import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions'; -import { useCanAutoFocus } from '../internal/pickers/hooks/useCanAutoFocus'; import { PickerSelectionState } from '../internal/pickers/hooks/usePickerState'; export type PickersDayClassKey = @@ -79,14 +84,6 @@ export interface PickersDayProps extends ExtendMui { * The date to show. */ day: TDate; - /** - * If `true`, the day element will be focused during the first mount. - */ - focused?: boolean; - /** - * If `true`, allows to focus by tabbing. - */ - focusable?: boolean; /** * If `true`, day is outside of month and will be hidden. */ @@ -131,6 +128,8 @@ export interface PickersDayProps extends ExtendMui { onDaySelect: (day: TDate, isFinish: PickerSelectionState) => void; } +const noop = () => {}; + /** * @ignore - do not document. */ @@ -141,18 +140,17 @@ const PickersDay = React.forwardRef(function PickersDay( const { allowKeyboardControl, allowSameDateSelection = false, + autoFocus = false, classes, className, day, disabled = false, disableHighlightToday = false, disableMargin = false, - focusable = false, - focused = false, hidden, isAnimating, onClick, - onDayFocus, + onDayFocus = noop, onDaySelect, onFocus, onKeyDown, @@ -163,27 +161,19 @@ const PickersDay = React.forwardRef(function PickersDay( ...other } = props; - const utils = useUtils(); - const canAutoFocus = useCanAutoFocus(); + const utils = useUtils(); const ref = React.useRef(null); const handleRef = useForkRef(ref, forwardedRef); React.useEffect(() => { - if ( - focused && - !disabled && - !isAnimating && - !outsideCurrentMonth && - ref.current && - allowKeyboardControl && - canAutoFocus - ) { - ref.current.focus(); + if (autoFocus && !disabled && !isAnimating && !outsideCurrentMonth) { + // ref.current being null would be a bug in Material-UI + ref.current!.focus(); } - }, [allowKeyboardControl, canAutoFocus, disabled, focused, isAnimating, outsideCurrentMonth]); + }, [autoFocus, disabled, isAnimating, outsideCurrentMonth]); const handleFocus = (event: React.FocusEvent) => { - if (!focused && onDayFocus) { + if (onDayFocus) { onDayFocus(day); } @@ -204,11 +194,54 @@ const PickersDay = React.forwardRef(function PickersDay( } }; - const handleKeyDown = onSpaceOrEnter(() => { - if (!disabled) { - onDaySelect(day, 'finish'); + const theme = useTheme(); + + function handleKeyDown(event: React.KeyboardEvent) { + if (onKeyDown !== undefined) { + onKeyDown(event); + } + + if (!allowKeyboardControl) { + return; } - }, onKeyDown); + + switch (event.key) { + case 'ArrowUp': + onDayFocus(utils.addDays(day, -7)); + event.preventDefault(); + break; + case 'ArrowDown': + onDayFocus(utils.addDays(day, 7)); + event.preventDefault(); + break; + case 'ArrowLeft': + onDayFocus(utils.addDays(day, theme.direction === 'ltr' ? -1 : 1)); + event.preventDefault(); + break; + case 'ArrowRight': + onDayFocus(utils.addDays(day, theme.direction === 'ltr' ? 1 : -1)); + event.preventDefault(); + break; + case 'Home': + onDayFocus(utils.startOfWeek(day)); + event.preventDefault(); + break; + case 'End': + onDayFocus(utils.endOfWeek(day)); + event.preventDefault(); + break; + case 'PageUp': + onDayFocus(utils.getNextMonth(day)); + event.preventDefault(); + break; + case 'PageDown': + onDayFocus(utils.getPreviousMonth(day)); + event.preventDefault(); + break; + default: + break; + } + } const dayClassName = clsx( classes.root, @@ -232,7 +265,7 @@ const PickersDay = React.forwardRef(function PickersDay( data-mui-test="day" disabled={disabled} aria-label={utils.format(day, 'fullDate')} - tabIndex={focused || focusable ? 0 : -1} + tabIndex={selected ? 0 : -1} className={dayClassName} onFocus={handleFocus} onKeyDown={handleKeyDown} @@ -249,8 +282,7 @@ export const areDayPropsEqual = ( nextProps: PickersDayProps, ) => { return ( - prevProps.focused === nextProps.focused && - prevProps.focusable === nextProps.focusable && + prevProps.autoFocus === nextProps.autoFocus && prevProps.isAnimating === nextProps.isAnimating && prevProps.today === nextProps.today && prevProps.disabled === nextProps.disabled && @@ -280,6 +312,10 @@ PickersDay.propTypes = { * @default false */ allowSameDateSelection: PropTypes.bool, + /** + * @ignore + */ + autoFocus: PropTypes.bool, /** * The content of the component. */ @@ -309,14 +345,6 @@ PickersDay.propTypes = { * If `true`, days are rendering without margin. Useful for displaying linked range of days. */ disableMargin: PropTypes.bool, - /** - * If `true`, allows to focus by tabbing. - */ - focusable: PropTypes.bool, - /** - * If `true`, the day element will be focused during the first mount. - */ - focused: PropTypes.bool, /** * @ignore */ diff --git a/packages/material-ui-lab/src/StaticDatePicker/StaticDatePickerKeyboard.test.tsx b/packages/material-ui-lab/src/StaticDatePicker/StaticDatePickerKeyboard.test.tsx index fda03ee6232cf1..e46ac8c1ef1f37 100644 --- a/packages/material-ui-lab/src/StaticDatePicker/StaticDatePickerKeyboard.test.tsx +++ b/packages/material-ui-lab/src/StaticDatePicker/StaticDatePickerKeyboard.test.tsx @@ -10,7 +10,6 @@ describe(' keyboard interactions', () => { describe('Calendar keyboard navigation', () => { it('autofocus selected day on mount', () => { - // Important: Use here in order to avoid async waiting for focus because of packages/material-ui-lab/src/internal/pickers/hooks/useCanAutoFocus.tsx logic render( keyboard interactions', () => { { keyCode: 40, key: 'ArrowDown', expectFocusedDay: 'Aug 20, 2020' }, ].forEach(({ key, keyCode, expectFocusedDay }) => { it(key, () => { - // Important: Use here in order to avoid async waiting for focus because of packages/material-ui-lab/src/internal/pickers/hooks/useCanAutoFocus.tsx logic render( void; + onClick: (event: React.MouseEvent, value: number) => void; + onKeyDown: (event: React.KeyboardEvent, value: number) => void; selected: boolean; - focused: boolean; value: number; - allowKeyboardControl?: boolean; forwardedRef?: React.Ref; } @@ -63,26 +61,18 @@ export const styles: MuiStyles = (theme): StyleRules>( (props, forwardedRef) => { - const { - allowKeyboardControl, - classes, - children, - disabled, - focused, - onSelect, - selected, - value, - } = props; + const { autoFocus, classes, children, disabled, onClick, onKeyDown, selected, value } = props; const ref = React.useRef(null); const refHandle = useForkRef(ref, forwardedRef as React.Ref); - const canAutoFocus = useCanAutoFocus(); const wrapperVariant = React.useContext(WrapperVariantContext); + // TODO: Can we just forward this to the button? React.useEffect(() => { - if (canAutoFocus && focused && ref.current && !disabled && allowKeyboardControl) { - ref.current.focus(); + if (autoFocus) { + // `ref.current` being `null` would be a bug in Material-UIu + ref.current!.focus(); } - }, [allowKeyboardControl, canAutoFocus, disabled, focused]); + }, [autoFocus]); return (
onSelect(value)} - onKeyDown={onSpaceOrEnter(() => onSelect(value))} + onClick={(event) => onClick(event, value)} + onKeyDown={(event) => onKeyDown(event, value)} className={clsx(classes.yearButton, { [classes.disabled]: disabled, [classes.selected]: selected, diff --git a/packages/material-ui-lab/src/YearPicker/YearPicker.test.tsx b/packages/material-ui-lab/src/YearPicker/YearPicker.test.tsx index efeb587d0088c8..730767a2f23f94 100644 --- a/packages/material-ui-lab/src/YearPicker/YearPicker.test.tsx +++ b/packages/material-ui-lab/src/YearPicker/YearPicker.test.tsx @@ -46,7 +46,7 @@ describe('', () => { }), ); - it('allows to pick year standalone', () => { + it('allows to pick year standalone by click, `Enter` and `Space`', () => { const onChangeMock = spy(); render( ', () => { onChange={onChangeMock} />, ); + const targetYear = screen.getByRole('button', { name: '2025' }); + + // A native button implies Enter and Space keydown behavior + // These keydown events only trigger click behavior if they're trusted (programmatically dispatched events aren't trusted). + // If this breaks, make sure to add tests for + // - fireEvent.keyDown(targetDay, { key: 'Enter' }) + // - fireEvent.keyUp(targetDay, { key: 'Space' }) + expect(targetYear.tagName).to.equal('BUTTON'); + + fireEvent.click(targetYear); - fireEvent.click(screen.getByText('2025', { selector: 'button' })); expect(onChangeMock.callCount).to.equal(1); expect(onChangeMock.args[0][0]).toEqualDateTime(adapterToUse.date('2025-02-02T00:00:00.000')); }); diff --git a/packages/material-ui-lab/src/YearPicker/YearPicker.tsx b/packages/material-ui-lab/src/YearPicker/YearPicker.tsx index ed6dff71b50449..7655010438cd49 100644 --- a/packages/material-ui-lab/src/YearPicker/YearPicker.tsx +++ b/packages/material-ui-lab/src/YearPicker/YearPicker.tsx @@ -8,7 +8,6 @@ import { PickerOnChangeFn } from '../internal/pickers/hooks/useViews'; import { findClosestEnabledDate } from '../internal/pickers/date-utils'; import { PickerSelectionState } from '../internal/pickers/hooks/usePickerState'; import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext'; -import { useGlobalKeyDown, keycode as keys } from '../internal/pickers/hooks/useKeyDown'; export interface ExportedYearPickerProps { /** @@ -78,51 +77,40 @@ const YearPicker = React.forwardRef(function YearPicker( const selectedYearRef = React.useRef(null); const [focusedYear, setFocusedYear] = React.useState(currentYear); - const handleYearSelection = React.useCallback( - (year: number, isFinish: PickerSelectionState = 'finish') => { - const submitDate = (newDate: TDate) => { - onChange(newDate, isFinish); - - if (onFocusedDayChange) { - onFocusedDayChange(newDate || now); - } - - if (onYearChange) { - onYearChange(newDate); - } - }; - - const newDate = utils.setYear(selectedDate, year); - if (isDateDisabled(newDate)) { - const closestEnabledDate = findClosestEnabledDate({ - utils, - date: newDate, - minDate, - maxDate, - disablePast: Boolean(disablePast), - disableFuture: Boolean(disableFuture), - shouldDisableDate: isDateDisabled, - }); - - submitDate(closestEnabledDate || now); - } else { - submitDate(newDate); + const handleYearSelection = ( + event: React.SyntheticEvent, + year: number, + isFinish: PickerSelectionState = 'finish', + ) => { + const submitDate = (newDate: TDate) => { + onChange(newDate, isFinish); + + if (onFocusedDayChange) { + onFocusedDayChange(newDate || now); } - }, - [ - utils, - now, - selectedDate, - isDateDisabled, - onChange, - onFocusedDayChange, - onYearChange, - minDate, - maxDate, - disablePast, - disableFuture, - ], - ); + + if (onYearChange) { + onYearChange(newDate); + } + }; + + const newDate = utils.setYear(selectedDate, year); + if (isDateDisabled(newDate)) { + const closestEnabledDate = findClosestEnabledDate({ + utils, + date: newDate, + minDate, + maxDate, + disablePast: Boolean(disablePast), + disableFuture: Boolean(disableFuture), + shouldDisableDate: isDateDisabled, + }); + + submitDate(closestEnabledDate || now); + } else { + submitDate(newDate); + } + }; const focusYear = React.useCallback( (year: number) => { @@ -134,13 +122,32 @@ const YearPicker = React.forwardRef(function YearPicker( ); const yearsInRow = wrapperVariant === 'desktop' ? 4 : 3; - const nowFocusedYear = focusedYear || currentYear; - useGlobalKeyDown(Boolean(allowKeyboardControl), { - [keys.ArrowUp]: () => focusYear(nowFocusedYear - yearsInRow), - [keys.ArrowDown]: () => focusYear(nowFocusedYear + yearsInRow), - [keys.ArrowLeft]: () => focusYear(nowFocusedYear + (theme.direction === 'ltr' ? -1 : 1)), - [keys.ArrowRight]: () => focusYear(nowFocusedYear + (theme.direction === 'ltr' ? 1 : -1)), - }); + + const handleKeyDown = (event: React.KeyboardEvent, year: number) => { + if (!allowKeyboardControl) { + return; + } + switch (event.key) { + case 'ArrowUp': + focusYear(year - yearsInRow); + event.preventDefault(); + break; + case 'ArrowDown': + focusYear(year + yearsInRow); + event.preventDefault(); + break; + case 'ArrowLeft': + focusYear(year + (theme.direction === 'ltr' ? -1 : 1)); + event.preventDefault(); + break; + case 'ArrowRight': + focusYear(year + (theme.direction === 'ltr' ? 1 : -1)); + event.preventDefault(); + break; + default: + break; + } + }; return (
@@ -153,9 +160,9 @@ const YearPicker = React.forwardRef(function YearPicker( key={utils.format(year, 'year')} selected={selected} value={yearNumber} - onSelect={handleYearSelection} - allowKeyboardControl={allowKeyboardControl} - focused={yearNumber === focusedYear} + onClick={handleYearSelection} + onKeyDown={handleKeyDown} + autoFocus={allowKeyboardControl && yearNumber === focusedYear} ref={selected ? selectedYearRef : undefined} disabled={ (disablePast && utils.isBeforeYear(year, now)) || diff --git a/packages/material-ui-lab/src/internal/pickers/PickersPopper.tsx b/packages/material-ui-lab/src/internal/pickers/PickersPopper.tsx index 45dff15d344102..241bc97073ed49 100644 --- a/packages/material-ui-lab/src/internal/pickers/PickersPopper.tsx +++ b/packages/material-ui-lab/src/internal/pickers/PickersPopper.tsx @@ -6,7 +6,7 @@ import Popper, { PopperProps as MuiPopperProps } from '@material-ui/core/Popper' import TrapFocus, { TrapFocusProps as MuiTrapFocusProps, } from '@material-ui/core/Unstable_TrapFocus'; -import { useForkRef, setRef, useEventCallback, ownerDocument } from '@material-ui/core/utils'; +import { useForkRef, useEventCallback, ownerDocument } from '@material-ui/core/utils'; import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles'; import { TransitionProps as MuiTransitionProps } from '@material-ui/core/transitions'; import { useGlobalKeyDown, keycode } from './hooks/useKeyDown'; @@ -29,7 +29,6 @@ export interface PickerPopperProps extends ExportedPickerPopperProps, MuiPaperPr open: MuiPopperProps['open']; containerRef?: React.Ref; onClose: () => void; - onOpen: () => void; } export type PickersPopperClassKey = 'root' | 'paper' | 'topTransition'; @@ -171,7 +170,6 @@ const PickersPopper: React.FC> = ( classes, containerRef = null, onClose, - onOpen, open, PopperProps, role, @@ -202,15 +200,7 @@ const PickersPopper: React.FC> = ( const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onClose); const paperRef = React.useRef(null); const handleRef = useForkRef(paperRef, containerRef); - - const handlePaperRef = useEventCallback((node: HTMLElement) => { - setRef(handleRef, node); - setRef(clickAwayRef, node); - - if (node) { - onOpen(); - } - }); + const handlePaperRef = useForkRef(handleRef, clickAwayRef); return ( React.useContext(CanAutoFocusContext); - -export function useAutoFocusControl(open: boolean) { - const [canAutoFocus, setCanAutoFocus] = React.useState(false); - - React.useEffect(() => { - if (!open) { - setCanAutoFocus(false); - } - }, [open]); - - // TODO rething approach. It is a temporal fix to allow tests that are rendering Popper to update the state using - if (process.env.NODE_ENV === 'test') { - return { - canAutoFocus: true, - onOpen: () => {}, - }; - } - - return { - canAutoFocus, - onOpen: () => setCanAutoFocus(true), - }; -} diff --git a/packages/material-ui-lab/src/internal/pickers/wrappers/DesktopTooltipWrapper.tsx b/packages/material-ui-lab/src/internal/pickers/wrappers/DesktopTooltipWrapper.tsx index 2fbc8839b28cd4..04e1219964773a 100644 --- a/packages/material-ui-lab/src/internal/pickers/wrappers/DesktopTooltipWrapper.tsx +++ b/packages/material-ui-lab/src/internal/pickers/wrappers/DesktopTooltipWrapper.tsx @@ -3,7 +3,6 @@ import { WrapperVariantContext } from './WrapperVariantContext'; import { KeyboardDateInput } from '../KeyboardDateInput'; import { executeInTheNextEventLoopTick } from '../utils'; import PickersPopper from '../PickersPopper'; -import { CanAutoFocusContext, useAutoFocusControl } from '../hooks/useCanAutoFocus'; import { PrivateWrapperProps, DesktopWrapperProps } from './WrapperProps'; const DesktopTooltipWrapper: React.FC = (props) => { @@ -18,7 +17,6 @@ const DesktopTooltipWrapper: React.FC } = props; const inputRef = React.useRef(null); const popperRef = React.useRef(null); - const { canAutoFocus, onOpen } = useAutoFocusControl(open); const handleBlur = () => { executeInTheNextEventLoopTick(() => { @@ -35,26 +33,19 @@ const DesktopTooltipWrapper: React.FC return ( - - - - {children} - - + + + {children} + ); }; diff --git a/packages/material-ui-lab/src/internal/pickers/wrappers/DesktopWrapper.tsx b/packages/material-ui-lab/src/internal/pickers/wrappers/DesktopWrapper.tsx index 53ed6c9d10bfce..ec66b93afebe96 100644 --- a/packages/material-ui-lab/src/internal/pickers/wrappers/DesktopWrapper.tsx +++ b/packages/material-ui-lab/src/internal/pickers/wrappers/DesktopWrapper.tsx @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import { WrapperVariantContext } from './WrapperVariantContext'; import { KeyboardDateInput } from '../KeyboardDateInput'; import PickersPopper from '../PickersPopper'; -import { CanAutoFocusContext, useAutoFocusControl } from '../hooks/useCanAutoFocus'; import { PrivateWrapperProps, DesktopWrapperProps } from './WrapperProps'; const DesktopWrapper: React.FC = (props) => { @@ -17,24 +16,20 @@ const DesktopWrapper: React.FC = (pro TransitionComponent, } = props; const inputRef = React.useRef(null); - const { canAutoFocus, onOpen } = useAutoFocusControl(open); return ( - - - - {children} - - + + + {children} + ); };