Nesting gatsby-link's using <object> not working

jaysella commented 5 years ago

Description

When using gatsby-link as the parent element and nesting another link within an <object>, the nested link does not work unless right-clicking and "opening in new tab". See the referenced article below on nesting links with <object>.

Steps to reproduce

Import gatsby-link -> import { Link } from 'gatsby'

Insert a gatsby-link with another link nested inside within an <object>:

<Link to="/page-2">
Foo
<object type="foo/bar">
<a href="//google.com">Bar</a>
</object>
Bot
</Link>

Expected result

In the above example, Foo and Bot should link to "/page-2" and Bar should link to "//google.com":

Foo Bar Bot

See Roman Komarov's article on nesting links using an <object>.

Actual result

Foo, Bot, AND Bar all link to "/page-2" when clicking them. However, right-clicking on Bar and opening the link in a new tab does work as expected, directing to "//google.com"

The link preview in the bottom-left corner of Chrome does show the correct links, but the parent gatsby-link takes over.

Environment

System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    npm: 6.10.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 75.0.3770.142
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.13.32 => 2.13.32
    gatsby-image: ^2.2.6 => 2.2.6
    gatsby-plugin-google-analytics: ^2.1.4 => 2.1.4
    gatsby-plugin-hotjar: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.2.3 => 2.2.3
    gatsby-plugin-offline: ^2.2.4 => 2.2.4
    gatsby-plugin-react-helmet: ^3.1.2 => 3.1.2
    gatsby-plugin-sass: ^2.1.3 => 2.1.3
    gatsby-plugin-sharp: ^2.2.8 => 2.2.8
    gatsby-plugin-sitemap: ^2.2.3 => 2.2.3
    gatsby-remark-external-links: 0.0.4 => 0.0.4
    gatsby-source-contentful: ^2.1.14 => 2.1.14
    gatsby-source-filesystem: ^2.1.5 => 2.1.5
    gatsby-transformer-remark: ^2.6.8 => 2.6.8
    gatsby-transformer-sharp: ^2.2.4 => 2.2.4
  npmGlobalPackages:
    gatsby-cli: 2.7.17

stefanprobst commented 5 years ago

As the article you linked states, nested links are not valid html.

jaysella commented 5 years ago

Also as the article states:

Obviously, a validator is a tool not showing anything but the formal specifications compliance. In our case, the usage of links inside objects is entirely reasonable and won’t break anything for anyone if we’d make things in a proper way. ... There are a lot of cases where this is a crucial requirement, and right now all we have are workarounds and “hacks” like this one.

My question relates to how gatsby-link treats <object>'s / nested elements differently than default html <a> tags. On the docs page, it is stated:

In any situation where you want to link between pages on the same site, use the Link component instead of an a tag.

This, however, is misleading since as pointed out here, gatsby-link treats nested elements differently. It appears gatsby-link is much stricter in adhering to the specs. Is this true for the gatsby-link component?

I am not trying to argue the validity of the workaround but rather trying to understand the differences between the standard a and Gatsby's Link which are noted to be interchangeable for internal links.

stefanprobst commented 5 years ago

gatsby-link registers an onClick handler here: https://github.com/gatsbyjs/gatsby/blob/ec8371ea8d7dbc118afe95c655dd1add293d8783/packages/gatsby-link/src/index.js#L145-L167

So one way to do this would be to programmatically navigate on the anchor as well:

<Link to="/page-2">
  <span>Foo</span>
  <a
    href="https://google.com"
    onClick={e => {
      e.preventDefault()
      window.location = e.target.href
    }}
  >
    Bar
  </a>
  <span>Baz</span>
</Link>

jaysella commented 5 years ago

Thank you, Stefan. I am closing this issue.

gatsbyjs / gatsby