Re-enable index-based keys for options

Reverses backwards-compatibility-breaking changes introduced in cccb705.

Author: jakezatecky

examples/dist/index.js

@@ -21884,18 +21884,22 @@ return /******/ (function(modules) { // webpackBootstrap
 			value: function renderOptions(options) {
 				var _this7 = this;
 
-				return options.map(function (option) {
+				return options.map(function (option, index) {
+					// Intentionally use array index to allow React to jump to next selection
+					// https://github.com/jakezatecky/react-dual-listbox/issues/10
+					var key = 'key-' + index;
+
 					if (option.options !== undefined) {
 						return _react2.default.createElement(
 							'optgroup',
-							{ key: option.label, label: option.label },
+							{ key: key, label: option.label },
 							_this7.renderOptions(option.options)
 						);
 					}
 
 					return _react2.default.createElement(
 						'option',
-						{ key: option.value, value: option.value },
+						{ key: key, value: option.value },
 						option.label
 					);
 				});

src/js/DualListBox.js

@@ -268,17 +268,21 @@ class DualListBox extends React.Component {
 	 * @returns {Array}
 	 */
 	renderOptions(options) {
-		return options.map((option) => {
+		return options.map((option, index) => {
+			// Intentionally use array index to allow React to jump to next selection
+			// https://github.com/jakezatecky/react-dual-listbox/issues/10
+			const key = `key-${index}`;
+
 			if (option.options !== undefined) {
 				return (
-					<optgroup key={option.label} label={option.label}>
+					<optgroup key={key} label={option.label}>
 						{this.renderOptions(option.options)}
 					</optgroup>
 				);
 			}
 
 			return (
-				<option key={option.value} value={option.value}>
+				<option key={key} value={option.value}>
 					{option.label}
 				</option>
 			);