diff --git a/components/Pagination/Pagination.js b/components/Pagination/Pagination.js index c411779bb5..18ee1ec867 100644 --- a/components/Pagination/Pagination.js +++ b/components/Pagination/Pagination.js @@ -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'); @@ -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); } diff --git a/components/Pagination/PaginationLink.js b/components/Pagination/PaginationLink.js index 76df56fa6b..bf9f19e102 100644 --- a/components/Pagination/PaginationLink.js +++ b/components/Pagination/PaginationLink.js @@ -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; diff --git a/components/RefinementList.js b/components/RefinementList.js index a3f4966229..6018a5c1df 100644 --- a/components/RefinementList.js +++ b/components/RefinementList.js @@ -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); @@ -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; diff --git a/lib/utils.js b/lib/utils.js index 1c5d98d6aa..3473f2cac8 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -1,7 +1,8 @@ var utils = { getContainerNode, bemHelper, - prepareTemplateProps + prepareTemplateProps, + isSpecialClick }; function getContainerNode(selectorOrHTMLElement) { @@ -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) {