From d2826215251e5d8f106da245024b0674042477fe Mon Sep 17 00:00:00 2001
From: Matthew Smith <mtscout6@gmail.com>
Date: Mon, 23 Mar 2015 15:43:59 -0600
Subject: [PATCH] [fixed] Split buttons with React 0.13

Adds a span with an &nbsp; and letter-spacing shrunkedn to hide the
space. For some reason with React 0.13 that span does not have content
which causes it to render really small.
---
 src/SplitButton.jsx      | 1 +
 test/SplitButtonSpec.jsx | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/SplitButton.jsx b/src/SplitButton.jsx
index 6958ff673d..f20f0e0f8f 100644
--- a/src/SplitButton.jsx
+++ b/src/SplitButton.jsx
@@ -56,6 +56,7 @@ var SplitButton = React.createClass({
         id={null}>
         <span className="sr-only">{this.props.dropdownTitle}</span>
         <span className="caret" />
+        <span style={{letterSpacing: '-.3em'}}>&nbsp;</span>
       </Button>
     );
 
diff --git a/test/SplitButtonSpec.jsx b/test/SplitButtonSpec.jsx
index c26a2b18eb..5bd8779a4b 100644
--- a/test/SplitButtonSpec.jsx
+++ b/test/SplitButtonSpec.jsx
@@ -29,10 +29,12 @@ describe('SplitButton', function () {
     assert.equal(button.nodeName, 'BUTTON');
     assert.equal(button.type, 'button');
     assert.ok(dropdownButton.className.match(/\bdropdown-toggle\b/));
-    assert.ok(dropdownButton.lastChild.className.match(/\bcaret\b/));
     assert.equal(button.innerText.trim(), 'Title');
-    assert.ok(dropdownButton.firstChild.className.match(/\bsr-only\b/));
-    assert.equal(dropdownButton.firstChild.innerText.trim(), 'Toggle dropdown');
+    assert.ok(dropdownButton.childNodes[0].className.match(/\bsr-only\b/));
+    assert.equal(dropdownButton.childNodes[0].innerText.trim(), 'Toggle dropdown');
+    assert.ok(dropdownButton.childNodes[1].className.match(/\bcaret\b/));
+    assert.equal(dropdownButton.childNodes[2].style.letterSpacing, '-0.3em');
+    assert.equal(dropdownButton.childNodes.length, 3);
   });
 
   it('Should render menu correctly', function () {