Skip rendering arrow wrapper when custom arrow renderer returns falsy…

… value
JedWatson · Oct 12, 2017 · 93af361 · 93af361
1 parent 7523c20
commit 93af361
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/src/Select.js b/src/Select.js
@@ -837,6 +837,10 @@ class Select extends React.Component {
 		const isOpen = this.state.isOpen;
 		const arrow = this.props.arrowRenderer({ onMouseDown, isOpen });
 
+		if (!arrow) {
+			return null;
+		}
+
 		return (
 			<span
 				className="Select-arrow-zone"

diff --git a/test/Select-test.js b/test/Select-test.js
@@ -3782,6 +3782,24 @@ describe('Select', () => {
 		});
 	});
 
+	describe('custom arrowRenderer option', () => {
+		it('should render the custom arrow', () => {
+			const instance = createControl({
+				options: [1,2,3],
+				arrowRenderer: () => <div className="customArrow" />
+			});
+			expect(ReactDOM.findDOMNode(instance), 'to contain elements matching', '.customArrow');
+		});
+
+		it('should not render the clickable arrow container if the arrowRenderer returns a falsy value', () => {
+			const instance = createControl({
+				options: [1,2,3],
+				arrowRenderer: () => null
+			});
+			expect(ReactDOM.findDOMNode(instance), 'to contain no elements matching', '.Select-arrow-zone');
+		});
+	});
+
 	describe('accessibility', () => {
 
 		describe('with basic searchable control', () => {