Как установить ширину пользовательского интерфейса Popper на ширину контейнера, при этом отключив портал как false - PullRequest
Новая
       5

Как установить ширину пользовательского интерфейса Popper на ширину контейнера, при этом отключив портал как false

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

Я использую material-ui popper .

Я хочу, чтобы popper go поместил контейнер в направлении y. Поэтому я установил disableportal={false}.

Но после установки disableportal в false, когда я даю width: 100%, popper занимает всю ширину браузера, а не только ширину контейнера. Я не хочу, чтобы поппер выводил go из контейнера в направлении x, но отрегулируйте его ширину в соответствии с шириной его контейнера. Как мне этого добиться? Пожалуйста, проверьте ниже код для воспроизведения вышеупомянутой проблемы. 

import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Grow from '@material-ui/core/Grow';
import Input from '@material-ui/core/Input';
import MenuItem from '@material-ui/core/MenuItem';
import MenuList from '@material-ui/core/MenuList';
import Paper from '@material-ui/core/Paper';
import Popper from '@material-ui/core/Popper';
import React from 'react';

const items = [
  'fsdfsdfsdfs',
  'shosjsadsd',
  'dsfdjhfdksfhdsf',
  'fsdfhdhhhhhhhhh',
];

export function Test() {
    const [value, setValue] = React.useState('');
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleChange = (event: any) => {
        setValue(event.target.value);
    };

    const renderChildren = () => {
        let renderItems = items;
        if (value !== '') {
          renderItems = items.filter((item: any) => item.toLowerCase().includes(value.toLowerCase()));
        }
        return renderItems.map((item: any) => {
            return (
                <MenuItem key={item}>
                    {item}
                </MenuItem>
            );
        });
    };

    const onFoucs = (event: any) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    const popperTrans = ({ TransitionProps }: any) => {
        return (
          <Grow
            {...TransitionProps}
            style={{ transformOrigin: '0 0 0' }}
          >
            <Paper>
                <MenuList>
                    {renderChildren()}
                </MenuList>
            </Paper>
          </Grow>
        );
    };

    const open = Boolean(anchorEl);
    return (
      <div style={{width: 1000, height: 500}}>
        <ClickAwayListener onClickAway={handleClose}>
            <div>
                <Input
                    onChange={handleChange}
                    onFocus={onFoucs}
                    value={value}
                    placeholder='Search'
                    style={{width: '100%'}}
                />
                <Popper
                    open={open}
                    anchorEl={anchorEl}
                    transition={true}
                    placement='bottom-start'
                    style={{zIndex: 10000, width: '100%'}}
                >
                    {popperTrans}
                </Popper>
            </div>
        </ClickAwayListener>
      </div>
    );
}

1 Ответ

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

Я не уверен в том, что вызывает проблему для вас. Я могу только указать вам на пример в документах . Я вдохновил мою реализацию оттуда, и это работало как очарование. Одно отличие, которое я вижу из вашего примера кода, заключается в том, что <ClickAwayListener> должен быть заключен только вокруг <MenuList>. Надеюсь, это поможет.

...