Merge pull request #382 from bhstahl/disabled-clicks

Completely ignore clicks on disabled items

Author: JedWatson

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(
 		<StatesField label="States" searchable />
 		<UsersField label="Users (custom options/value)" hint="This example uses Gravatar to render user's image besides the value and the options" />
 		<ValuesAsNumbersField label="Values as numbers" />
+
 		<MultiSelectField label="Multiselect"/>
 		<SelectedValuesField label="Clickable labels (labels as links)" options={FLAVOURS} hint="Open the console to see click behaviour (data/event)" />
 		<SelectedValuesField label="Disabled option" options={FLAVOURS_WITH_DISABLED_OPTION} hint="You savage! Caramel is the best..." />
+		<DisabledUpsellOptions label="Disable option with an upsell link"/>
 		<SelectedValuesField label="Option Creation (tags mode)" options={FLAVOURS} allowCreate hint="Enter a value that's not in the list, then hit enter" />
 		<CustomRenderField label="Custom render options/values" />
 		<CustomRenderField label="Custom render options/values (multi)" multi delimiter="," />

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 <a style={{ marginLeft: 5 }} href="/upgrade" target="_blank">Upgrade here!</a>;
+	},
+	renderOption: function(option) {
+		return <span>{option.label} {option.link} </span>;
+	},
+	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 (
+			<div className="section">
+				<h3 className="section-heading">{this.props.label}</h3>
+				<Select
+					onOptionLabelClick={this.onLabelClick}
+					placeholder="Select your support level"
+					options={ops}
+					optionRenderer={this.renderOption}
+					onChange={logChange} />
+			</div>
+		);
+	}
+});
+module.exports = DisabledUpsellOptions;

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 ? (
-			<div className={optionClasses}>{renderedLabel}</div>
+			<div className={optionClasses}
+				onMouseDown={this.blockEvent}
+				onClick={this.blockEvent}>
+				{renderedLabel}
+			</div>
 		) : (
 			<div className={optionClasses}
 				 style={obj.style}

test/Select-test.js

@@ -945,6 +945,15 @@ describe('Select', function() {
 			});
 			expect(options[1], 'to have text', 'Three');
 		});
+
+		it('is does not close menu when disabled option is clicked', function () {
+
+			clickArrowToOpen();
+			TestUtils.Simulate.mouseDown(React.findDOMNode(instance).querySelectorAll('.Select-option')[1]);
+
+			var options = React.findDOMNode(instance).querySelectorAll('.Select-option');
+			expect(options.length, 'to equal', 3);
+		});
 	});
 
 	describe('with styled options', function () {
@@ -2460,6 +2469,82 @@ describe('Select', function() {
 			});
 		});
 
+		describe('optionRendererDisabled', function () {
+
+			var optionRenderer;
+			var renderLink = function(props) {
+				return <a {...props} >Upgrade here!</a>;
+			};
+
+			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 (
+						<span>{option.label} {option.link} </span>
+					);
+				};
+
+				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 () {