Add reset label/functionality

mozilla · Aug 4, 2021 · 3088cf6 · 3088cf6
1 parent 0731a11
commit 3088cf6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/privaterelay/locales/en-US/app.ftl b/privaterelay/locales/en-US/app.ftl
@@ -147,6 +147,7 @@ profile-label-upgrade = Get unlimited aliases
 profile-label-create-domain = Create your Email Domain
 profile-label-domain = Email Domain:
 profile-label-domain-tooltip = Create your unique and custom email domain.
+profile-label-reset = Reset
 
 # This string is followed by an email address
 profile-label-forward-emails = Forward emails to:

diff --git a/privaterelay/templates/includes/dashboard-filter.html b/privaterelay/templates/includes/dashboard-filter.html
@@ -12,8 +12,8 @@
                 /
                 <span class="js-filter-case-total"></span>
             </div>
-            <button class="c-filter-reset js-filter-reset">
-                <img alt="" src="{% static '/images/x-close.svg' %}"/>
+            <button aria-label="{% ftlmsg 'profile-label-reset' %}" type="reset" class="c-filter-reset js-filter-reset">
+                <img alt="Reset" src="{% static '/images/x-close.svg' %}"/>
             </button>
         </form>
     </div>

diff --git a/static/js/filter.js b/static/js/filter.js
@@ -28,7 +28,8 @@
 	function filterInputWatcher(e) {
 		const query = e.target.value.toLowerCase();
 
-        if (query === "") resetFilter();
+        // Reset filter if the input is empty, however, do not steal focus to input
+        if (query === "") resetFilter({focus: false});
 
 		// Hide all cases
 		aliases.forEach(alias => {
@@ -119,15 +120,25 @@
           }
         });
 
-        filterResetButton.addEventListener("click", resetFilter, false);
+        // TODO: Add esc key listener
+        filterResetButton.addEventListener("click", ()=> {
+            resetFilter({focus: true});
+        }, false);
 	}
 
-    function resetFilter() {
+    function resetFilter(opts) {
         filterLabelVisibleCases.textContent = aliases.length;
         filterLabelTotalCases.textContent = aliases.length;
+        filterInput.value = "";
+
         aliases.forEach(alias => {
             alias.style.display = "block";
         });
+
+        if (opts && opts.focus) {
+            filterInput.focus();
+        }
+
     }
 
     // TODO: Remove timeout and watch for event to detect if add-on is enabled (checking if labels exist)