diff --git a/examples/src/app.js b/examples/src/app.js
index 13ff6d2dbe..cb06945ba6 100644
--- a/examples/src/app.js
+++ b/examples/src/app.js
@@ -10,6 +10,7 @@ import SelectedValuesField from './components/SelectedValuesField';
import StatesField from './components/StatesField';
import UsersField from './components/UsersField';
import ValuesAsNumbersField from './components/ValuesAsNumbersField';
+import DisabledUpsellOptions from './components/DisabledUpsellOptions';
var FLAVOURS = [
{ label: 'Chocolate', value: 'chocolate' },
@@ -30,9 +31,11 @@ React.render(
+
+
diff --git a/examples/src/components/DisabledUpsellOptions.js b/examples/src/components/DisabledUpsellOptions.js
new file mode 100644
index 0000000000..2932c018ef
--- /dev/null
+++ b/examples/src/components/DisabledUpsellOptions.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import Select from 'react-select';
+
+function logChange() {
+ console.log.apply(console, [].concat(['Select value changed:'], Array.prototype.slice.apply(arguments)));
+}
+
+var DisabledUpsellOptions = React.createClass({
+ displayName: 'DisabledUpsellOptions',
+ propTypes: {
+ label: React.PropTypes.string,
+ },
+ onLabelClick: function (data, event) {
+ console.log(data, event);
+ },
+ renderLink: function() {
+ return Upgrade here!;
+ },
+ renderOption: function(option) {
+ return {option.label} {option.link} ;
+ },
+ render: function() {
+ var ops = [
+ { label: 'Basic customer support', value: 'basic' },
+ { label: 'Premium customer support', value: 'premium' },
+ { label: 'Pro customer support', value: 'pro', disabled: true, link: this.renderLink() },
+ ];
+ return (
+
+
{this.props.label}
+
+
+ );
+ }
+});
+module.exports = DisabledUpsellOptions;
diff --git a/src/Option.js b/src/Option.js
index 32a94b11a1..b786a9a1d9 100644
--- a/src/Option.js
+++ b/src/Option.js
@@ -12,13 +12,30 @@ var Option = React.createClass({
renderFunc: React.PropTypes.func // method passed to ReactSelect component to render label text
},
+ blockEvent: function(event) {
+ event.preventDefault();
+ if ((event.target.tagName !== 'A') || !('href' in event.target)) {
+ return;
+ }
+
+ if (event.target.target) {
+ window.open(event.target.href);
+ } else {
+ window.location.href = event.target.href;
+ }
+ },
+
render: function() {
var obj = this.props.option;
var renderedLabel = this.props.renderFunc(obj);
var optionClasses = classes(this.props.className, obj.className);
return obj.disabled ? (
- {renderedLabel}
+
+ {renderedLabel}
+
) : (
Upgrade here!;
+ };
+
+ var links = [
+ { href: '/link' },
+ { href: '/link2', target: '_blank' }
+ ];
+
+ var ops = [
+ { label: 'Disabled', value: 'disabled', disabled: true, link: renderLink(links[0]) },
+ { label: 'Disabled 2', value: 'disabled_2', disabled: true, link: renderLink(links[1]) },
+ { label: 'Enabled', value: 'enabled' },
+ ];
+
+ /**
+ * Since we don't have access to an actual Location object,
+ * this method will test a string (path) by the end of global.window.location.href
+ * @param {string} path Ending href path to check
+ * @return {Boolean} Whether the location is at the path
+ */
+ var isNavigated = function(path) {
+ var window_location = global.window.location.href;
+ return window_location.indexOf(path, window_location.length - path.length) !== -1;
+ };
+
+ beforeEach(function () {
+
+ optionRenderer = function (option) {
+ return (
+ {option.label} {option.link}
+ );
+ };
+
+ optionRenderer = sinon.spy(optionRenderer);
+
+ instance = createControl({
+ options: ops,
+ optionRenderer: optionRenderer
+ });
+ });
+
+ it('disabled option link is still clickable', function () {
+ var selectArrow = React.findDOMNode(instance).querySelector('.Select-arrow');
+ TestUtils.Simulate.mouseDown(selectArrow);
+ var options = React.findDOMNode(instance).querySelectorAll('.Select-option');
+ var link = options[0].querySelector('a');
+ expect(link, 'to have attributes', {
+ href: links[0].href
+ });
+
+ expect(isNavigated(links[0].href), 'to be false');
+ TestUtils.Simulate.click(link);
+ expect(isNavigated(links[0].href), 'to be true');
+ });
+
+ it('disabled option link with target doesn\'t navigate the current window', function () {
+ var selectArrow = React.findDOMNode(instance).querySelector('.Select-arrow');
+ TestUtils.Simulate.mouseDown(selectArrow);
+ var options = React.findDOMNode(instance).querySelectorAll('.Select-option');
+ var link = options[1].querySelector('a');
+ expect(link, 'to have attributes', {
+ href: links[1].href,
+ target: '_blank'
+ });
+
+ expect(isNavigated(links[0].href), 'to be true');
+ TestUtils.Simulate.click(link);
+ expect(isNavigated(links[1].href), 'to be false');
+ });
+
+ });
+
describe('placeholder', function () {
beforeEach(function () {