Вложенное меню располагается рядом с главным меню (React, Material UI) - PullRequest
Новая
       9

Вложенное меню располагается рядом с главным меню (React, Material UI)

0 голосов
/ 26 марта 2020

Я работаю над проектом React, используя Материал v0.19.4. Я размещаю вложенное меню, используя компонент popover. Он хорошо работает в режиме отображения на рабочем столе, но в мобильном режиме вложенное меню находится рядом с главным меню. Я думаю, что это связано с zIndex, но я не уверен, как решить эту проблему.

Вот мой фрагмент кода. 

<IconMenu
            iconButtonElement={
                <IconButton>
                    <FilterListIcon />
                </IconButton>
            }
            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
            targetOrigin={{ horizontal: 'left', vertical: 'top' }}
            open={p.open}
            onRequestChange={(open: boolean, reason: string) => {
                console.log(reason)
                if (reason === 'clickAway') {
                    p.setOpen(false)
                    p.setActiveMenuItem('')
                }
            }}
        >
            {Object.keys(p.filterTypes).map(filterType => {
                const filterTypeObj = getInSafe(
                    p,
                    o => o.filterTypes[filterType],
                    {}
                )
                if (filterTypeObj.filterTypeType === 'id') {
                    return (
                        <MenuItem
                            key={`filter-dropdown-${filterType}`}
                            primaryText={formatName(
                                filterTypeObj.filterTitle || filterType
                            )}
                            rightIcon={<ArrowDropRight />}
                            onClick={(ev: MouseEvent) => {
                                ev.preventDefault()
                                p.setActiveMenuItem(filterType)
                                p.setActiveMenuElement(ev.currentTarget)
                            }}
                        >
                            {p.activeMenuItem === filterType && (
                                <Popover
                                    open={true}
                                    anchorEl={p.activeMenuElement}
                                    anchorOrigin={{
                                        horizontal: 'right',
                                        vertical: 'top',
                                    }}
                                    targetOrigin={{
                                        horizontal: 'left',
                                        vertical: 'top',
                                    }}
                                    style={{ zIndex: 3000 }}
                                    z
                                >
                                    <Menu>
                                        {filterTypeObj.availableFilters
                                            .sort((a, b) =>
                                                getInSafe(
                                                    a,
                                                    o =>
                                                        o.title.localeCompare(
                                                            b.title
                                                        ),
                                                    0
                                                )
                                            )
                                            .map(filter => (
                                                <MenuItem
                                                    key={`type-id-dropdown-${filter.id}`}
                                                    primaryText={filter.title}
                                                    onClick={() => {
                                                        p[
                                                            `update${filterType}`
                                                        ](
                                                            filter,
                                                            filter.idValue
                                                        )
                                                        p.setOpen(false)
                                                        p.setActiveMenuItem('')
                                                    }}
                                                />
                                            ))}
                                    </Menu>
                                </Popover>
                            )}
                        </MenuItem>
                    )
                }
                if (filterTypeObj.filterTypeType === 'enum') {
                    return (
                        <MenuItem
                            key={`filter-dropdown-${filterType}`}
                            primaryText={formatName(
                                filterTypeObj.filterTitle || filterType
                            )}
                            rightIcon={<ArrowDropRight />}
                            onClick={(ev: MouseEvent) => {
                                ev.preventDefault()
                                p.setActiveMenuItem(filterType)
                                p.setActiveMenuElement(ev.currentTarget)
                            }}
                        >
                            {p.activeMenuItem === filterType && (
                                <Popover
                                    open={true}
                                    anchorEl={p.activeMenuElement}
                                    anchorOrigin={{
                                        horizontal: 'right',
                                        vertical: 'top',
                                    }}
                                    targetOrigin={{
                                        horizontal: 'left',
                                        vertical: 'top',
                                    }}
                                    style={{ zIndex: 3000 }}
                                >
                                    <Menu>
                                        {filterTypeObj.availableFilters.map(
                                            filter => (
                                                <MenuItem
                                                    key={`type-enum-dropdown-${filter.id}`}
                                                    primaryText={formatName(
                                                        filter.title
                                                    )}
                                                    onClick={() => {
                                                        p[
                                                            `update${filterType}`
                                                        ](filter.enum)
                                                        p.setOpen(false)
                                                        p.setActiveMenuItem('')
                                                    }}
                                                />
                                            )
                                        )}
                                    </Menu>
                                </Popover>
                            )}
                        </MenuItem>
                    )
                }
                return null
            })}
        </IconMenu>

введите описание изображения здесь

...