MUI Modal [tabindex]? - css

Question

I have tried incorporating a modal into my project, but the modal is not able to close and the height is covering the entire screen length. When I inspect element, it says:
[tabindex]:
outline: none;
height: 100%
How do I get rid of this height: 100% ?
This is the code (from MUI example + my styled component):
import React from 'react';
import Modal from '#mui/material/Modal';
import styled from 'styled-components';
import Box from '#mui/material/Box';
import Typography from '#mui/material/Typography';
const style = {
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
};
export function FeedbackButton() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<>
<FButton onClick={handleOpen}>FeedBack</FButton>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Typography id="modal-modal-title" variant="h6" component="h2">
Text in a modal
</Typography>
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
</Typography>
</Box>
</Modal>
</>
);
}
const FButton = styled.button`
position: absolute;
background: white;
bottom: 15px;
right: 15px;
padding: 16px;
border-radius: 10px;
font-size: 20px;
font-family: Verlag;
`;
the problems with height 100% are:
if I set the modal style to a fixed height limit, it doesn't close when I click outside of it because of the overflow
looks ugly
TLDR: How do I exempt this one element from [tabindex]?

Answer 1

try setting your own height like in the example
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
hieght: 600,