Remove scope by clicking on it or by backspacing into it (#942)

Remove scope by clicking on it or by backspacing into it

assets/javascripts/views/search/search.coffee

@@ -30,6 +30,9 @@ class app.views.Search extends app.View
       .on 'results', @onResults
       .on 'end', @onEnd
 
+    @scope
+      .on 'change', @onScopeChange
+
     app.on 'ready', @onReady
     $.on window, 'hashchange', @searchUrl
     $.on window, 'focus', @onWindowFocus
@@ -138,6 +141,11 @@ class app.views.Search extends app.View
     $.stopEvent(event)
     return
 
+  onScopeChange: =>
+    @value = ''
+    @onInput()
+    return
+
   afterRoute: (name, context) =>
     return if app.shortcuts.eventInProgress?.name is 'escape'
     @reset(true) if not context.init and app.router.isIndex()

assets/javascripts/views/search/search_scope.coffee

@@ -6,6 +6,7 @@ class app.views.SearchScope extends app.View
     tag:   '._search-tag'
 
   @events:
+    click: 'onClick'
     keydown: 'onKeydown'
 
   @routes:
@@ -87,11 +88,17 @@ class app.views.SearchScope extends app.View
     @trigger 'change', null, previousDoc
     return
 
+  onClick: (event) =>
+    if event.target is @tag
+      @reset()
+      $.stopEvent(event)
+    return
+
   onKeydown: (event) =>
     if event.which is 8 # backspace
-      if @doc and not @input.value
-        $.stopEvent(event)
+      if @doc and @input.selectionEnd is 0
         @reset()
+        $.stopEvent(event)
     else if not @doc and @input.value
       return if event.ctrlKey or event.metaKey or event.altKey or event.shiftKey
       if event.which is 9 or # tab

assets/stylesheets/components/_header.scss

@@ -215,5 +215,6 @@
   color: var(--textColorLight);
   background: var(--searchTagBackground);
   border-radius: 2px;
+  cursor: pointer;
   @extend %truncate-text;
 }