Maximum call stack size exceeded when DatePicker inside a modal.

Environment

Tech	Version
material-ui-pickers	1.0.0-rc.10
material-ui	1.0.0-beta.47
React	16.3.2
Browser	Chrome
Platform	Elementary
Moment	2.22.2

Steps to reproduce

1. Have a DatePicker inside of a Material-UI Dialog/Modal
2. Click on datepicker

Expected behavior

DatePicker modal opens without errors being logged when clicked.

Actual behavior

The following errors are logger: Uncaught RangeError: Maximum call stack size exceeded. at HTMLDocument.Modal._this.enforceFocus (VM1034 Modal.js:185) at HTMLDocument.value (VM385 Modal.js:246) at HTMLDocument.Modal._this.enforceFocus (VM1034 Modal.js:185) at HTMLDocument.value (VM385 Modal.js:246) at HTMLDocument.Modal._this.enforceFocus (VM1034 Modal.js:185) at HTMLDocument.value (VM385 Modal.js:246) at HTMLDocument.Modal._this.enforceFocus (VM1034 Modal.js:185) …

Live example

Go here https://codesandbox.io/s/y2v3wz3lzx

I can work around this issue by passing disableEnforceFocus to <Dialog/>, but that is not ideal. Being able to pass Dialog/Modal options to the DatePicker would allow for a much better solution. That way a shared ModalManager or disableEnforceFocus could be passed to the Dialog.

[Baradoy]

Sorry, @kamalpy I have not had a chance to do anything with this yet. I set ‘disableEnforceFocus’ on the non-DatePicker modal for the moment. Hopefully in a week or two I can come back to this.

[zefj]

Closing in favor of #552

@cherniavskii how exactly does that solve the issue? The problem still exists while using inline datepicker inside of bootstrap modals - because bootstrap tries to trap focus inside the modal, while your library is trying to trap focus outside of it, in the popover portal.

Edit for future reference:

There’s an undocumented PopoverProps prop that you can use to sort of hack around this issue. The way I did this is I save a reference to the input field, and then check whether it’s rendered inside a bootstrap modal. If it is, then I supply the modal as container for the Popover portal. More or less like so:

const DatePickerComponent = (props) => {
    const ref = useRef();

    return (
        <DatePicker
            {...restDatePickerProps}

            TextFieldComponent={({ inputRef, ...restTextFieldProps }) => {
                ref.current = inputRef.current;
                return <input ref={inputRef} {...restTextFieldProps} />; // this is just for the sake of keeping the example syntax semi-correct, will probably warn the shit out of your console
            }}
            
            PopoverProps={{
                container: () => {
                    const bootstrapModal = document.querySelector('div.modal.show'); // Make sure the selector is specific enough for your use-case

                    if (bootstrapModal && bootstrapModal.contains(ref.current)) {
                        return bootstrapModal;
                    }

                    return null; // Let the popover fallback to it's default behaviour
                },
            }}
        />
    );
}

This obviously has it’s drawbacks, like the fact you have to override TextFieldComponent, but we do that anyway so it works for our usecase.