Maximum call stack size exceeded when DatePicker inside a modal.

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.

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.