Clear editor and hide template selector when filename input is emptyresolve-usability-problem-file-template

2 files changed, 12 insertions, 5 deletions

diff --git a/app/assets/javascripts/blob/file_template_mediator.js b/app/assets/javascripts/blob/file_template_mediator.js
index 42b62e8ece4..115c4ee801b 100644
--- a/app/assets/javascripts/blob/file_template_mediator.js
+++ b/app/assets/javascripts/blob/file_template_mediator.js
@@ -91,7 +91,12 @@ export default class FileTemplateMediator {
 
   listenForFilenameInput() {
     this.$filenameInput.on('keyup blur', () => {
-      this.displayMatchedTemplateSelector();
+      if(this.isFilenameEmpty()) {
+        this.clearEditorContent()
+        this.hideTemplateSelectorMenu()
+      } else {
+        this.displayMatchedTemplateSelector();
+      }
     });
   }
 
@@ -255,6 +260,10 @@ export default class FileTemplateMediator {
     this.$filenameInput.val(filename)
   }
 
+  isFilenameEmpty() {
+    return this.getFilename() === ""
+  }
+
   getSelected() {
     return this.templateSelectors.find(selector => selector.selected);
   }
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 413195498d7..1914a47514e 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -33,8 +33,8 @@
   .file-title {
     @extend .monospace;
     line-height: 35px;
-    padding-top: 2px;
-    padding-bottom: 2px;
+    padding-top: 7px;
+    padding-bottom: 7px;
     display: flex;
     align-items: center;
   }
@@ -182,7 +182,6 @@
 
 .template-selector-dropdowns-wrap {
   display: inline-block;
-  margin: 10px 0 0 8px;
   vertical-align: top;
 
   @media(max-width: map-get($grid-breakpoints, md)-1) {
@@ -199,7 +198,6 @@
     display: inline-block;
     vertical-align: top;
     font-family: $regular_font;
-    margin-top: -5px;
 
     @media(max-width: map-get($grid-breakpoints, md)-1) {
       display: block;