Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Outlook classic: Buttons are not actually clickable #272

Closed
osdiab opened this issue Dec 24, 2024 · 4 comments · Fixed by #274
Closed

Outlook classic: Buttons are not actually clickable #272

osdiab opened this issue Dec 24, 2024 · 4 comments · Fixed by #274

Comments

@osdiab
Copy link
Contributor

osdiab commented Dec 24, 2024 •
edited
Loading

  • Component or Package Name: jsx-email
  • Component or Package Version: 2.5.4
  • @jsxp-email/cli Version?: whatever came with it
  • Operating System (or Browser): Server running on Mac OSX (during dev), email client on Windows 11 via UTM
  • Node Version: 22
  • Link to reproduction (⚠️ read below): umm this is kind of hard since I don't exactly want to provide keys to our Sendgrid account to actually send the emails here.

Expected Behavior

Buttons are links that are clickable on all email clients. Gmail seems fine.

Here is the minimal email I used, inline:

        render(<Html>
          <Body>
            <Container>
              <Button width={200} height={50} href={loginUrl.toString()}>
                Sign In By Clicking Here
              </Button>
            </Container>
          </Body>
        </Html>)

and send that straight to Sendgrid's SDK to shoot off the email.

Actual Behavior

On Outlook (classic), the link isn't actually a button and on click just kind of highlights the button, nor does it show the "hand" cursor on hover

Screenshot 2024-12-24 at 16 03 56

Viewing the source,

Screenshot 2024-12-24 at 16 03 40

we see that there is an <a> element, but it doesn't seem to be clickable at all. here's the resulting HTML (taken from the above View Source menu option):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii"></head>
<body><div style="table-layout:fixed;width:100%"><div style="margin:0 auto;max-width:600px"><span><!--[if mso]><table align="center" width="600" style="border-spacing: 0; width:600px;" role="presentation"><tr><td><![endif]--></span><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0" style="max-width:600px"><tbody><tr style="width:100%"><td align="center"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse" role="presentation"><tbody><tr><td align="left"><span><!--[if mso]>
            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="0%"  strokeweight="1px" fill="false">
            <w:anchorlock/>
            <center style="font-size:16px;">
            Sign In By Clicking Here
            </center></v:roundrect>
            <![endif]--></span><a href="https://url8612.email.example.com/ls/click?upn=u001.5pi1QUNK2POq-2BylfXxKg2TbOJCo60TlC-2BlezPvYAQr2M-2BzkJF3p65auafFgxaPxQAyqp-2Fk-2F3USOHF4sWuvkL57gX575XUVg7fLTyoyhF5qYnNVbYAIgl4lzjilYcLI34Q1mBMtSwvcR5Fc1xLZpGBpXE1lC96ToX3oW-2FZuVYvi1DrInK-2B4gKMjTo-2B7CWMopRAC-2BrUJneF4k8mB-2FoN77v9A-3D-3DBTxe_1TlFHJk1nIIvI0ll4srvpKrX2ZZejd29LpCFDe5n2TLJL8WArQKowx5ZgGoB-2FVgQytdcDE-2B5-2F2LrvzqE-2B2-2BA0AFBoW32-2FrOw2jIb3qqGbLtY5hWmxsX88RQq2bMtPOVfOT35-2BHxNRsXBev3pfjMxL9eHdSiW0vVZSwtY0moLIPvnetjkcTkVCAopC9b5bY-2Bthh-2FC1rNiHrv3YZaDpPpO2f8wDup08ulgehq1-2FkiWtmg-3D" style="-webkit-text-size-adjust:none;border-radius:0;display:inline-block;font-size:16px;line-height:48px;max-width:200px;text-align:center;text-decoration:none;width:100%;mso-hide:all">Sign In By Clicking Here</a></td></tr></tbody></table></td></tr></tbody></table><span><!--[if mso]></td></tr></table><![endif]--></span></div></div><img src="https://url8612.email.example.com/wf/open?upn=u001.B46aNF4W92o-2BCxC5rqPzGbNwGARwWrrOMv6ALqXcGtp2CNeixAcB3wP7K4vsoTgEN-2FoT0ZIXQprRZV42FGsyFQaPrEr7W063mBkx0fkEkTUqmTK6-2FnSGXq2QcmePzRIjBi-2B3oeAmx3zw32ox-2Fd7zXUVfRUr6OgH156h5OcoyPFT01TnZZ0GgLuXrL2SEcaomprBdqsE16LnNCCsXTVP37zFwXo92x-2FNZdYvc94lCvLM-3D" alt="" width="1" height="1" border="0" style="height:1px !important;width:1px !important;border-width:0 !important;margin-top:0 !important;margin-bottom:0 !important;margin-right:0 !important;margin-left:0 !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;"></body></html>

Additional Information

Maybe relevant but I'm using React 19 in the server, despite jsx-email not officially supporting it.
@osdiab
Copy link
Contributor Author

osdiab commented Dec 24, 2024 •
edited
Loading

eyeballing the output HTML it seems like the <a /> element has a CSS rule to hide it for Outlook, which I assume probably explains why the button isn't actually interactive.

@osdiab
Copy link
Contributor Author

osdiab commented Dec 24, 2024 •
edited
Loading

I think this is the problem:

jsx-email/packages/jsx-email/src/components/button.tsx

Line 111 in cf99078

${children}

The Microsoft fallback doesn't render an <a> element at all, when I manually mess around with the output to add in an <a> element where children gets rendered, at least the text becomes clickable.

@osdiab
Copy link
Contributor Author

osdiab commented Dec 24, 2024

That said even adding in an <a> element there, it is pretty weird how the button behaves with these corner handles and rotation and stuff.

https://www.loom.com/share/163a9bf7a00249d39a8ecb3c2eb09eaa

@osdiab osdiab mentioned this issue Dec 25, 2024
Merged
9 tasks
@lordelogos
Copy link
Collaborator

Hi @osdiab,

I’ve added a reply to your PR and wanted to highlight it here for better visibility, ensuring everyone is aware that we are actively working towards a resolution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(jsx-email): add link href to vml for outlook buttons osdiab/jsx-email
2 participants
@osdiab @lordelogos