MUI Modal [tabindex]?

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:

1. 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
2. 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,