Skip to content

Commit

Permalink
fix(onClick): do not replace the browser's behavior on special clicks
Browse files Browse the repository at this point in the history
It seems to be a common practice to not do anything if one of the
special (shift, ctrl, alt or meta) keys are down:
https://github.com/search?q=react+metakey+ctrlkey+preventdefault&type=Code&utf8=%E2%9C%93

Fix #278
  • Loading branch information
redox committed Oct 19, 2015
1 parent 7f983d0 commit 8562d49
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 6 deletions.
6 changes: 6 additions & 0 deletions components/Pagination/Pagination.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
var React = require('react');
var forEach = require('lodash/collection/forEach');
var defaultsDeep = require('lodash/object/defaultsDeep');
var {isSpecialClick} = require('../../lib/utils.js');

var Paginator = require('./Paginator');
var PaginationLink = require('./PaginationLink');
Expand All @@ -14,6 +15,11 @@ class Pagination extends React.Component {
}

handleClick(pageNumber, event) {
if (isSpecialClick(event)) {
// do not alter the default browser behavior
// if one special key is down
return;
}
event.preventDefault();
this.props.setCurrentPage(pageNumber);
}
Expand Down
5 changes: 0 additions & 5 deletions components/Pagination/PaginationLink.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
var React = require('react');

class PaginationLink extends React.Component {
handleClick(page, e) {
e.preventDefault();
this.props.setCurrentPage(page);
}

render() {
var {className, label, ariaLabel, handleClick, url} = this.props;

Expand Down
9 changes: 9 additions & 0 deletions components/RefinementList.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ var cx = require('classnames');

var Template = require('./Template');

var {isSpecialClick} = require('../lib/utils.js');


class RefinementList extends React.Component {
refine(value) {
this.props.toggleRefinement(value);
Expand Down Expand Up @@ -53,6 +56,12 @@ class RefinementList extends React.Component {
// Finally, we always stop propagation of the event to avoid multiple levels RefinementLists to fail: click
// on child would click on parent also
handleClick(value, e) {
if (isSpecialClick(e)) {
// do not alter the default browser behavior
// if one special key is down
return;
}

if (e.target.tagName === 'INPUT') {
this.refine(value);
return;
Expand Down
7 changes: 6 additions & 1 deletion lib/utils.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
var utils = {
getContainerNode,
bemHelper,
prepareTemplateProps
prepareTemplateProps,
isSpecialClick
};

function getContainerNode(selectorOrHTMLElement) {
Expand All @@ -28,6 +29,10 @@ function isDomElement(o) {
return o instanceof HTMLElement || o && o.nodeType > 0;
}

function isSpecialClick(event) {
return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
}

function bemHelper(block) {
return function(element, modifier) {
if (!element) {
Expand Down

0 comments on commit 8562d49

Please sign in to comment.