Allow for Esc to clear all filters (#625)

* Allow for `Esc` to clear all filters

* Changelog

* Change duplicated ctrlKey (in DatePicker too)

CHANGELOG.md

@@ -13,6 +13,7 @@ All notable changes to this project will be documented in this file.
 - "Load More" capability to pages modal plausible/analytics#480
 - Unique Visitors (last 30 min) as a top stat in realtime view plausible/analytics#500
 - Pinned filter and date selector rows while scrolling plausible/analytics#472
+- Escape keyboard shortcut to clear all filters plausible/analytics#625
 
 ### Changed
 - Use alpine as base image to decrease Docker image size plausible/analytics#353

assets/js/dashboard/datepicker.js

@@ -41,7 +41,7 @@ class DatePicker extends React.Component {
   handleKeyup(e) {
     const { query, history } = this.props;
 
-    if (e.ctrlKey || e.ctrlKey || e.altKey) return;
+    if (e.ctrlKey || e.metaKey || e.altKey) return
 
     const newSearch = {
       period: false,

assets/js/dashboard/filters.js

@@ -24,11 +24,13 @@ class Filters extends React.Component {
     this.handleResize = this.handleResize.bind(this);
     this.rewrapFilters = this.rewrapFilters.bind(this);
     this.renderFilterList = this.renderFilterList.bind(this);
+    this.handleKeyup = this.handleKeyup.bind(this)
   }
 
   componentDidMount() {
     document.addEventListener('mousedown', this.handleClick, false);
     window.addEventListener('resize', this.handleResize, false);
+    document.addEventListener('keyup', this.handleKeyup);
 
     this.rewrapFilters();
     this.handleResize();
@@ -52,10 +54,21 @@ class Filters extends React.Component {
   }
 
   componentWillUnmount() {
+    document.removeEventListener("keyup", this.handleKeyup);
     document.removeEventListener('mousedown', this.handleClick, false);
     window.removeEventListener('resize', this.handleResize, false);
   }
 
+  handleKeyup(e) {
+    const {query, history} = this.props
+
+    if (e.ctrlKey || e.metaKey || e.altKey) return
+
+    if (e.key === 'Escape') {
+      this.clearAllFilters(history, query)
+    }
+  }
+
   handleResize() {
     this.setState({ viewport: window.innerWidth || 639});
   }