🐛 fixed fields autocomplete not working in popup #17701
Conversation
susannakosic
force-pushed
the
sk/fix/autocomplete
branch
from
d6e1ccb
to
0ba9f94
Compare
susannakosic
force-pushed
the
sk/fix/autocomplete
branch
from
0ba9f94
to
bad8fd5
Compare
| @@ -38,7 +38,7 @@ export const GlobalStyles = ` | |||
|
|
|||
| body { | |||
| margin: 0px; | |||
There was a problem hiding this comment.
Note for whoever will review this PR.
When testing signin popup, I noticed some font and paragraph changes on the page: headings font looked smaller, and there was a bigger separation between paragraphs (only when popup is open). This was caused by styles injected in the popup which were previously isolated in the iframe and now are embed in the body. I fixed the visual glitch by adding Inter font and removing parragraph bottom margin from global styles, although I am not 100% sure this was the correct approach.
closes TryGhost#16960 - replaced iframe by div for signin page
susannakosic
force-pushed
the
sk/fix/autocomplete
branch
from
bad8fd5
to
bdd1f52
Compare
| @@ -291,14 +294,10 @@ export default class PopupModal extends React.Component { | |||
| className += ' dev'; | |||
| } | |||
|
|
|||
| return ( | |||
| <div style={Styles.modalContainer}> | |||
| <Frame style={frameStyle} title="portal-popup" head={this.renderFrameStyles()} dataTestId='portal-popup-frame'> | |||
There was a problem hiding this comment.
I think iframe is used here to have a style encapsulation. Putting content directly to document may cause some styling issues in some templates. There are many 3rd party templates using portals for signin and their global style definitions can reach this login popup.
closes #16960
🤖 Generated by Copilot at d6e1ccb
The pull request updates the
PopupModalcomponent and the portal tests to fix some signin issues and improve the test code quality. It replaces theFramecomponent with adivelement for the signin page, and uses thescreenobject and thepopupFrameelement for querying DOM elements.