Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Added click modifiers, target prop #767

Merged
merged 13 commits into from
Mar 19, 2020
Merged

Added click modifiers, target prop #767

merged 13 commits into from
Mar 19, 2020

Conversation

HammadTheOne
Copy link
Collaborator

@HammadTheOne HammadTheOne commented Mar 6, 2020

This PR addresses #748 and adds the ability to control+click a Link to open it in a new tab. Although html.A is a better component to use for external links, this adds that functionality for people who might use it within a multi-page Dash app.

This PR also adds in the target prop to add logic that one would expect from a traditional link.

Closes #748 .
Closes #770

@chriddyp
Copy link
Member

chriddyp commented Mar 6, 2020

Awesome! Could we do a little research on other single page app link components on GitHub and see if we are missing any other logic? We really want this link to look and feel like a link.

This article describes this a bit more: http://jgaskins.org/blog/2016/07/30/don-t-change-perceived-browser-functionality. It would be great to check out the source code of a popular component on GitHub that has gone through all of these different edge cases: 😸

From http://jgaskins.org/blog/2016/07/30/don-t-change-perceived-browser-functionality, they recommend this:

function handleClick(event) {
  var hasModifiers = (
    event.metaKey ||
    event.shiftKey ||
    event.altKey ||
    event.ctrlKey
  );

  // Only handle unmodified left click. Leave everything else alone.
  if(hasModifiers || event.button !== 1) return;

  event.preventDefault(); // Only prevent AFTER confirming you should handle this.
};

@HammadTheOne
Copy link
Collaborator Author

That's a good point Chris. Added the other modifiers for now, I'll look for another similar component and see if we're missing anything else that might be nice to have.

@chriddyp
Copy link
Member

chriddyp commented Mar 6, 2020

Handling "enter" on focussed elements (you can "select" links by "tabbing" through the page) might be another one to consider. We might already handle this one effectively though.

@HammadTheOne
Copy link
Collaborator Author

Added dcc.Link Title prop in #768 .

@Marc-Andre-Rivet Marc-Andre-Rivet added this to the Dash v1.10 milestone Mar 16, 2020
@HammadTheOne
Copy link
Collaborator Author

HammadTheOne commented Mar 18, 2020

Added in the external prop, of type bool. When set to True, the link will open in a new tab. While most Dash apps run in single-page, this combined with the other fixes to dcc.Location means a person can open up a dcc.Link in a multi-page app to a specific section of a chapter or page in a new tab. By default it is false, so it isn't a breaking change.

Closes #770 .

@@ -81,6 +87,7 @@ export default class Link extends Component {
href={href}
onClick={e => this.updateLocation(e)}
title={title}
target={external ? '_blank' : '_self'}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that I'd prefer that we just stick to the HTML convention here instead of defining a new API. That way, this component is more or less 1-1 with html.A. So, just let users pass through target directly rather than defining a new external property.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've seen a couple of other link components define external as a separate property, but I think you raise a good point, for both maintaining parity with html.A and offering a bit more freedom for the user to decide what to target.

Changed in 6514c83.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that I'd prefer that we just stick to the HTML convention here

I agree @chriddyp - cc @Marc-Andre-Rivet - we had a similar discussion a couple of days ago, also because there are other values of target that still matter.

@HammadTheOne HammadTheOne changed the title Added ctrlKey conditional Added click modifiers, target prop Mar 19, 2020
Copy link
Contributor

@Marc-Andre-Rivet Marc-Andre-Rivet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add target='_blank' support to dcc.Link Control-click is mishandled
4 participants