React DatePicker's popper stays underneath Leaflet MapContainer

Question

I'm trying to use React DatePicker in my project but DatePicker's popper stays underneath my leaflet map.

I'm also using React Select component and it works as expected so I'm guessing it is not a z-index issue. I couldn't understand what is causing the problem.

I've tried answers given to the similar problems but nothing worked for me.

I'll appreciate any help, thanks.

the datepicker

the select

<Flex direction="column" bg={"#242b2c"}>
            <Wrap align="stretch"
                justify="stretch"
                alignContent="stretch"
                spacing={0}
                w="full">
                <HStack borderRadius="sm"
                    h={""}
                    p={"2"}

                    alignItems="center"
                    justify="center">

                    <VStack spacing={0}>
                        <Select
                            onChange={selectedEq}
                            value={selectValue}
                            width="160px"
                            bg="white"
                            placeholder='Select a device'>
                            {data.map(item => (
                                <option key={item.id}>{item.equipmentId}</option>
                            ))}
                        </Select>
                    </VStack>

                    <VStack spacing={0}>
                        <DatePicker
                            portalId="root"
                            selected={startDate}
                            onChange={date => setStartDate(date)}
                            showTimeSelect
                            timeIntervals={5}
                            timeFormat="HH:mm"
                            dateFormat='yyyy/MM/dd h:mm'
                            isClearable
                            showYearDropdown
                            popperProps={{
                                positionFixed: true
                            }}
                        />
                    </VStack>
                </HStack>

            </Wrap>
            <MapContainer
                center={position}
                zoom={7}
                scrollWheelZoom={true}
                style={{ width: '100%', height: '95vh' }}
            >
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                />

                {data.map(item => {
                    if (item.equipmentId === selectValue)
                        return (
                            <Marker key={item.id} position={[item.latitude, item.longitude]} icon={GetIcon(item.equipmentId)}>
                                <Popup>{item.equipmentId}</Popup>
                            </Marker>
                        );
                })}

            </MapContainer>
        </Flex> 

Answer 1

I had a similar problem, a Popper that stayed behind the MapContainer.

But the above solution didn't solve it for me. MapContainer sets zIndex at 600 and its controls at 1000. I solved it by setting a higher zIndex directly on the Popper (MUI) itself. (Not the content in the Popper)

Answer 2

I've struggled with this the whole day and after giving a break I found the solution.

Instead of putting MapContainer directly inside the Flex, I put it in a Box container and made box container's zIndex=1. This easy solution took my whole day to figure it out so I'm gonna leave my solution here :)

<Flex direction="column" bg={"#242b2c"}>
            <Wrap align="stretch"
                justify="stretch"
                alignContent="stretch"
                spacing={0}
                w="full">
                <HStack borderRadius="sm"
                    h={""}
                    p={"2"}

                    alignItems="center"
                    justify="center">

                    <VStack spacing={0}>
                        <DatePicker
                            portalId="root-portal"
                            bg="white"
                            width="160px"
                            selected={startDate}
                            onChange={date => setStartDate(date)}
                            showTimeSelect
                            timeIntervals={5}
                            timeFormat="HH:mm"
                            dateFormat='yyyy/MM/dd h:mm'
                            isClearable
                            showYearDropdown
                        />
                    </VStack>
                </HStack>

            </Wrap>
            <Box zIndex={1}>
                <MapContainer
                    center={position}
                    zoom={7}
                    scrollWheelZoom={true}
                    style={{ width: '100%', height: '95vh' }}

                >
                    *same code*

                </MapContainer>
            </Box>
        </Flex>