How to set the width of material ui Popper to its container's width while setting disable portal as false

Question

I am using material-ui popper.

I want to let the popper go put of container in y-direction. So I set disableportal={false}.

But after setting disableportal to false, when I give width: 100%, popper is occupying the entire browser's width instead of just it's container's width. I don't want the popper to go out of container in x direction but adjust it's width to the width of it's container. How do I achieve this? Please check below code for reproducing the above issue.

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>
    );
}

Answer 1

Use anchorEl?.clientWidth:

<Popper
  open={Boolean(anchorEl)}
  anchorEl={anchorEl}
  style={{width: anchorEl?.clientWidth}}
>
  {...children}
</Popper>