[Bug]: Modal border radius changes if there is form field

cloudscape-design / components

React components for Cloudscape Design System

https://cloudscape.design/

Apache License 2.0

2.33k stars 152 forks source link

[Bug]: Modal border radius changes if there is form field #2641

Open phuctm97 opened 2 weeks ago

phuctm97 commented 2 weeks ago

Browser

Safari

Package version

3.0.733

React version

18.3.1

Description

When a Modal contains a FormField with Input, the modal border radius changes from 0 to rounded when opening.

Source code

No response

Reproduction

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems

YueyingLu commented 1 week ago

Hi @phuctm97 could you share how I can reproduce the issue you report? https://cloudscape.design/components/modal/?tabId=playground&example=with-text-input

phuctm97 commented 1 week ago

Hi @phuctm97 could you share how I can reproduce the issue you report? https://cloudscape.design/components/modal/?tabId=playground&example=with-text-input

Just open the link above and click on "Open modal", you'll see that the modal bottom border radius starts being rectangular then rounded for half a second each time (you can see it clearly at the last second of the video below).

https://github.com/user-attachments/assets/cbb1749f-f8de-4f32-a4af-c57b5e0cbeab