Clear the branch name after a successful checkout

lib/views/branch-menu-view.js

@@ -100,44 +100,42 @@ export default class BranchMenuView extends React.Component {
     );
   }
 
-  componentDidUpdate() {
-    const currentBranch = this.props.currentBranch.getName();
-    const branchNames = this.props.branches.getNames();
-    const hasNewBranch = branchNames.includes(this.state.checkedOutBranch);
-    if (currentBranch === this.state.checkedOutBranch && hasNewBranch) {
-      this.editorElement.classList.add('is-focused');
-      this.setState({checkedOutBranch: null, createNew: false});
-    }
-  }
-
   async didSelectItem(event) {
     const branchName = event.target.value;
     await this.checkout(branchName);
   }
 
   async createBranch() {
     if (this.state.createNew) {
-      const branchName = this.editorElement.innerText.trim();
+      const branchName = this.editorElement.getModel().getText().trim();
       await this.checkout(branchName, {createNew: true});
     } else {
-      this.setState({createNew: true}, () => {
-        this.editorElement.focus();
+      await new Promise(resolve => {
+        this.setState({createNew: true}, () => {
+          this.editorElement.focus();
+          resolve();
+        });
       });
     }
   }
 
   async checkout(branchName, options) {
     this.editorElement.classList.remove('is-focused');
-    this.setState({checkedOutBranch: branchName});
+    await new Promise(resolve => {
+      this.setState({checkedOutBranch: branchName}, resolve);
+    });
     try {
       await this.props.checkout(branchName, options);
+      await new Promise(resolve => {
+        this.setState({checkedOutBranch: null, createNew: false}, resolve);
+      });
+      this.editorElement.getModel().setText('');
     } catch (error) {
       this.editorElement.classList.add('is-focused');
-      this.setState({checkedOutBranch: null});
-      if (error instanceof GitError) {
-        // eslint-disable-next-line no-console
-        console.warn('Non-fatal', error);
-      } else {
+      await new Promise(resolve => {
+        this.setState({checkedOutBranch: null}, resolve);
+      });
+      if (!(error instanceof GitError)) {
         throw error;
       }
     }

test/controllers/status-bar-tile-controller.test.js

@@ -197,7 +197,7 @@ describe('StatusBarTileController', function() {
           assert.isTrue(selectList.className.includes('hidden'));
           assert.isFalse(tip.querySelector('.github-BranchMenuView-editor').className.includes('hidden'));
 
-          tip.querySelector('atom-text-editor').innerText = 'new-branch';
+          tip.querySelector('atom-text-editor').getModel().setText('new-branch');
           tip.querySelector('button').click();
           assert.isTrue(editor.hasAttribute('readonly'));
 
@@ -231,7 +231,7 @@ describe('StatusBarTileController', function() {
           assert.equal(tip.querySelector('select').value, 'branch');
 
           createNewButton.click();
-          tip.querySelector('atom-text-editor').innerText = 'master';
+          tip.querySelector('atom-text-editor').getModel().setText('master');
           createNewButton.click();
           assert.isTrue(createNewButton.hasAttribute('disabled'));
 
@@ -245,9 +245,37 @@ describe('StatusBarTileController', function() {
           assert.isFalse(branch1.isDetached());
 
           assert.lengthOf(tip.querySelectorAll('.github-BranchMenuView-editor'), 1);
-          assert.equal(tip.querySelector('atom-text-editor').innerText, 'master');
+          assert.equal(tip.querySelector('atom-text-editor').getModel().getText(), 'master');
           assert.isFalse(createNewButton.hasAttribute('disabled'));
         });
+
+        it('clears the new branch name after successful creation', async function() {
+          const workdirPath = await cloneRepository('three-files');
+          const repository = await buildRepositoryWithPipeline(workdirPath, {confirm, notificationManager, workspace});
+
+          const wrapper = await mountAndLoad(buildApp({repository}));
+
+          // Open the branch creator, type a branch name, and confirm branch creation.
+          await wrapper.find('.github-BranchMenuView-button').simulate('click');
+          wrapper.find('.github-BranchMenuView-editor atom-text-editor').getDOMNode().getModel()
+            .setText('new-branch-name');
+          await wrapper.find('.github-BranchMenuView-button').simulate('click');
+
+          await until('branch creation completes', async () => {
+            const b = await repository.getCurrentBranch();
+            return b.getName() === 'new-branch-name' && !b.isDetached();
+          });
+          repository.refresh();
+          await assert.async.isUndefined(
+            wrapper.update().find('.github-BranchMenuView-editor atom-text-editor').prop('readonly'),
+          );
+
+          await wrapper.find('.github-BranchMenuView-button').simulate('click');
+          assert.strictEqual(
+            wrapper.find('.github-BranchMenuView-editor atom-text-editor').getDOMNode().getModel().getText(),
+            '',
+          );
+        });
       });
 
       describe('with a detached HEAD', function() {