diff --git a/README.md b/README.md
index 34c096ca2b..e697cbfe96 100644
--- a/README.md
+++ b/README.md
@@ -350,6 +350,7 @@ function onInputKeyDown(event) {
className | string | undefined | className for the outer element
clearable | bool | true | should it be possible to reset value
clearAllText | string | 'Clear all' | title for the "clear" control when `multi` is true
+ clearRenderer | func | undefined | Renders a custom clear to be shown in the right-hand side of the select when clearable true: `clearRenderer()`
clearValueText | string | 'Clear value' | title for the "clear" control
resetValue | any | null | value to use when you clear the control
deleteRemoves | bool | true | whether pressing delete key removes the last item when there is no input value
diff --git a/src/Select.js b/src/Select.js
index bfeefc7554..a913fe6559 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -12,6 +12,7 @@ import classNames from 'classnames';
import defaultArrowRenderer from './utils/defaultArrowRenderer';
import defaultFilterOptions from './utils/defaultFilterOptions';
import defaultMenuRenderer from './utils/defaultMenuRenderer';
+import defaultClearRenderer from './utils/defaultClearRenderer';
import Async from './Async';
import AsyncCreatable from './AsyncCreatable';
@@ -55,6 +56,7 @@ const Select = React.createClass({
backspaceToRemoveMessage: React.PropTypes.string, // Message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label
className: React.PropTypes.string, // className for the outer element
clearAllText: stringOrNode, // title for the "clear" control when multi: true
+ clearRenderer: React.PropTypes.func, // create clearable x element
clearValueText: stringOrNode, // title for the "clear" control
clearable: React.PropTypes.bool, // should it be possible to reset value
deleteRemoves: React.PropTypes.bool, // whether backspace removes an item if there is no text input
@@ -125,6 +127,7 @@ const Select = React.createClass({
backspaceToRemoveMessage: 'Press backspace to remove {label}',
clearable: true,
clearAllText: 'Clear all',
+ clearRenderer: defaultClearRenderer,
clearValueText: 'Clear value',
deleteRemoves: true,
delimiter: ',',
@@ -890,6 +893,8 @@ const Select = React.createClass({
renderClear () {
if (!this.props.clearable || (!this.props.value || this.props.value === 0) || (this.props.multi && !this.props.value.length) || this.props.disabled || this.props.isLoading) return;
+ const clear = this.props.clearRenderer();
+
return (
-
+ {clear}
);
},
diff --git a/src/utils/defaultClearRenderer.js b/src/utils/defaultClearRenderer.js
new file mode 100644
index 0000000000..3f25e85d7d
--- /dev/null
+++ b/src/utils/defaultClearRenderer.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function clearRenderer () {
+ return (
+
+ );
+};
diff --git a/test/Select-test.js b/test/Select-test.js
index 3b43d12238..6614b972b9 100644
--- a/test/Select-test.js
+++ b/test/Select-test.js
@@ -2255,6 +2255,23 @@ describe('Select', () => {
});
});
+ describe('clearRenderer', () => {
+
+ beforeEach(() => {
+ instance = createControl({
+ clearable: true,
+ value: 'three',
+ clearRenderer: () => O,
+ options: defaultOptions
+ });
+ });
+
+ it('renders a custom clear', () => {
+
+ expect(instance, 'to contain', O);
+ });
+ });
+
describe('clearValueText', () => {
beforeEach(() => {