0

I'm experiencing a strange issue where <a> anchors for external links do not behave as expected for mobile viewports in my React App. Clicking an external link initially works fine on mobile, launching a new tab, however subsequent link clicks on the same, or other <a> elements results in nothing happening.

This is odd because this works fine and as expected on desktop and larger viewports.

Here's a snippet example of how I'm using an anchor in a component:

import React from "react";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";

function ProjectExample() {
  return (
    <div>
      <Row className="project-row">
        <Col>
          <h3>Foo Bar</h3>
            <p>
              See my project here: <a href="https://github.com" target="_new">GitHub</a>. 
           </p>
        </Col>
      </Row>
    </div>
  );
}

export default ProjectExample;

Seems pretty basic right? Does anyone have any insight into why external link behavior would result in successive clicks on mobile not firing? This project is bare bones in the sense, for internal navigation I only am using react-scroll to scroll about the page similar to page anchors. I'm not utilizing react-router-dom or any other form of navigation. These links are purely to external sites and don't have any click events etc associated with them.

Is there something basic I'm overlooking?

Summary

External links are used in my app as standard html <a> anchor elements. These point to external sites, and work fine on desktop/laptop larger viewports, however for mobile, only an initial link click will open a new tab -- successive and additional link clicks (or even the same link) will not fire (e.g, nothing happens). What am I doing wrong?

twknab
  • 1,741
  • 1
  • 21
  • 35

1 Answers1

1

Use "_blank"

According to the HTML5 Spec:

A valid browsing context name is any string with at least one character that does not start with a U+005F LOW LINE character. (Names starting with an underscore are reserved for special keywords.)

A valid browsing context name or keyword is any string that is either a valid browsing context name or that is an ASCII case-insensitive match for one of: _blank, _self, _parent, or _top." - Source

That means that there is no such keyword as _new in HTML5, and not in HTML4 (and consequently XHTML) either. That means, that there will be no consistent behavior whatsoever if you use this as a value for the target attribute.

For detailed answer check this out: target="_blank" vs. target="_new"

Adhikansh Mittal
  • 601
  • 1
  • 5
  • 13
  • This is so helpful, you're a hero! I swear, my go-to has always `_blank` and for some reason or another I liked the sound of `_new` without realizing this is a bad convention . I wonder why perhaps this word hasn't been added as a valid keyword, since it does seem to appear so often (despite it being invalid!). This [comment](https://stackoverflow.com/questions/4964130/target-blank-vs-target-new#comment49830093_19544193) in the thread you linked was very helpful as well. I also added `rel="noopener noreferrer"` to all links. Thanks again, I've built and and tested and working like a charm :) – twknab Jul 30 '21 at 02:45