Modal's fullscreen prop not working

[Selenestica]

Describe the bug

Adding the fullscreen prop to Modal isn't making the Modal go fullscreen.

Reproducible Example

Minimal example by using CodeSandbox.

Expected behavior

The modal to be fullscreen.

Screenshots

This is the example on Code Sandbox. It's also not working on my app. In my app I'm using the latest version of the react-bootstrap package. The Code Sandbox example is using 1.5.2.

Environment

• Operating System: macOS M1
• Browser, Version: Chrome v94
• React-Bootstrap Version: 1.5.2 on Code Sandbox. 1.6.3 in my app.

Additional context

I'm confused because the fullscreen prop seems to be working in the example in the docs. You can run a phone emulator in Chrome here and see it working.
I don't see any important difference between the code in my app and the docs. Am I missing something? Doing something wrong? Any help would be greatly appreciated!

[nishant3721]

@Selenestica Can I work on it?

[Selenestica]

@nishant3721 Absolutely!

[nishant3721]

@Selenestica Thanks...I'm on it!

[Selenestica]

@nishant3721 I see. Do I need to install react-bootstrap version 2.0.0 for that?

[nishant3721]

@Selenestica do you have any repo/branch regarding this so that I can make a pull request of my code!?

Maybe that can work. If not, you can install the latest version.

[Selenestica]

@nishant3721 Unfortunately the repo I'm working with is private :(
I did try installing the latest version of react-bootstrap, 1.6.3, as well as 2.0.0-rc.0, but it didn't work on either of those.
Here is an updated Code SandBox

[nishant3721]

@Selenestica check this one!

`
const [fullscreen, setFullscreen] = useState(true);
const [show, setShow] = useState(false);

function handleShow() {
setFullscreen(true);
setShow(true);
}
`

<Button className="me-2" onClick={() => handleShow()}> Full screen </Button> <Modal show={show} fullscreen={fullscreen} onHide={() => setShow(false)}> {/* <Modal.Header closeButton> */} {/* <Modal.Title>Modal</Modal.Title> */} {/* </Modal.Header> */} <Modal.Body>Modal body content</Modal.Body> </Modal>

If that doesn't work. Maybe you can install the latest version!!
just type the command,

npm install react-bootstrap@next bootstrap@5.1.1

[nishant3721]

@Selenestica I'm pretty sure it is a version issue.

[Selenestica]

@nishant3721 Yes you're right! I got it to work in the sandbox, but not my app. Not sure why it's not working in the app, but I can probably figure it out from here. Thanks!

[nishant3721]

@Selenestica Yeah, That's what make me frustrating 😀