DateTimePicker is being cut off at the bottom

[abokey1]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.14.1

What package has an issue?

@mantine/dates

What framework do you use?

Other, I will specify in the bug description

In which browsers you can reproduce the issue?

All

Describe the bug

I'm making a Streamlit custom component (a python bridge to Mantine) but I can't make the DateTimePicker works like shown in the docs.

The calendar popup is being cut off at the bottom :

Here is my DateTimePicker.tsx

import { DateTimePicker as MantineDateTimePicker } from "@mantine/dates"
import { useState } from "react"
import { Streamlit } from "streamlit-component-lib"

interface DateTimePickerProps {
    label?: string
    placeholder?: string
    valueFormat?: string
    clearable?: boolean
    defaultValue?: Date
    disabled?: boolean
    size?: "xs" | "sm" | "md" | "lg" | "xl"
}

export function DateTimePicker({
    label,
    placeholder,
    valueFormat = "YYYY-MM-DD HH:mm:ss",
    clearable = true,
    defaultValue,
    disabled = false,
    size = "sm",
}: DateTimePickerProps) {
    const [value, setValue] = useState<Date | null>(defaultValue || null)

    const handleChange = (date: Date | null) => {
        setValue(date)
        Streamlit.setComponentValue(date ? date.toISOString() : null)
    }

    return (
        <div
            style={{
                position: "relative",
                overflow: "visible",
                minHeight: "100px",
            }}
        >
            <MantineDateTimePicker
                label={label}
                placeholder={placeholder}
                value={value}
                onChange={handleChange}
                valueFormat={valueFormat}
                clearable={clearable}
                disabled={disabled}
                size={size}
                // popoverProps={{
                //     withinPortal: true,
                //     closeOnEscape: true,
                //     closeOnClickOutside: true,
                //     zIndex: 9999,
                // }}
            />
        </div>
    )
}

And here is the MantineComponent.tsx file:

import {
    ComponentProps,
    Streamlit,
    withStreamlitConnection,
} from "streamlit-component-lib"
import React, { useEffect } from "react"
import { MantineProvider } from "@mantine/core"

// dates
import { DateTimePicker } from "./components/dates/DateTimePicker"
// rest of components

interface PythonArgs {
    component: string
    props: any
}

interface StreamlitTheme {
    base: "light" | "dark"
    primaryColor: string
    backgroundColor: string
    secondaryBackgroundColor: string
    textColor: string
    font: string
}

const MantineComponents = (props: ComponentProps) => {
    const { component, props: componentProps } = props.args as PythonArgs
    const theme = props.theme as StreamlitTheme

    useEffect(() => {
        Streamlit.setFrameHeight()
    }, [])

    const components: { [key: string]: React.ComponentType<any> } = {
        // dates
        DateTimePicker,
        // rest of components
    }

    const Component = components[component]
    if (!Component) {
        return <div>Component {component} not found</div>
    }

    return (
        <MantineProvider defaultColorScheme={theme.base}>
            <div
                style={{
                    position: "relative",
                    minHeight: "100px",
                }}
            >
                <Component {...componentProps} />
            </div>
        </MantineProvider>
    )
}

export default withStreamlitConnection(MantineComponents)

.. that is used by the index.tsx file:

import React from "react"
import { createRoot } from "react-dom/client"
import { MantineProvider } from "@mantine/core"
import { Notifications } from "@mantine/notifications"
import MantineComponent from "./MantineComponent"
import "@mantine/core/styles.css"
import "@mantine/charts/styles.css"
import "@mantine/carousel/styles.css"
import "@mantine/code-highlight/styles.css"
import "@mantine/dates/styles.css"
import "@mantine/notifications/styles.css"
import "./styles/main.css"

const container = document.getElementById("root")
const root = createRoot(container!)
root.render(
    <React.StrictMode>
        <MantineProvider>
            <Notifications
                position="bottom-right"
                containerWidth={300}
                zIndex={1000}
            />
            <MantineComponent />
        </MantineProvider>
    </React.StrictMode>
)

I tried playing with the popoverProps but still same problem.

The only solution I can think of is increasing the height of the parent div, but that's not ideal as it creates a large empty gap between the widget and the content below it:

    return (
        <div
            style={{
                position: "relative",
                overflow: "visible",
                minHeight: "400px",
            }}
        >
            <MantineDateTimePicker
// rest of the code

FYI, every streamlit custom component is rendered within an iFrame (e.g DateTimePicker):

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

I cannot reproduce this on the codesandbox (example of DateTimepicker in the container with overflow:hidden – https://codesandbox.io/p/sandbox/mantine-react-template-forked-24rrkj). Make sure that you do not disable withinPortal of this component somewhere in your application.

[abokey1]

Thank you @rtivital for the quick response ;). Unfortunately, I'm not disabeling withinPortal anywhere in my app. I provided all the relevant code in my post above. Can you check it please ? Could the iFrame be the issue ?

[rtivital]

Yes, iframe can be the issue, Mantine components cannot go beyond its document

[abokey1]

I think too and I'm really out of solutions. What confuses me is that NativeSelect works just fine and it seems to go beyond the iframe:

[rtivital]

DateTimePicker is a custom component, it cannot go beyond the parent document. Native select element uses native system UI which does not have such limitations.

[abokey1]

I think I got my answer, thank you so much! BTW, amazing library and easy to play with even using Python ;)