Add clear button to list filter search input (#1845)

* add clear button to list filter search input

ui/v2.5/src/components/Changelog/versions/v0110.md

@@ -4,6 +4,7 @@
 * Added interface options to disable creating performers/studios/tags from dropdown selectors. ([#1814](https://github.com/stashapp/stash/pull/1814))
 
 ### 🎨 Improvements
+* Added clear button to query text field. ([#1845](https://github.com/stashapp/stash/pull/1845))
 * Moved Performer rating stars from details/edit tabs to heading section of performer page. ([#1844](https://github.com/stashapp/stash/pull/1844))
 * Optimised scanning process. ([#1816](https://github.com/stashapp/stash/pull/1816))
 

ui/v2.5/src/components/List/ListFilter.tsx

@@ -1,5 +1,6 @@
 import _, { debounce } from "lodash";
 import React, { HTMLAttributes, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import Mousetrap from "mousetrap";
 import { SortDirectionEnum } from "src/core/generated-graphql";
 import {
@@ -44,6 +45,9 @@ export const ListFilter: React.FC<IListFilterProps> = ({
 }) => {
   const [customPageSizeShowing, setCustomPageSizeShowing] = useState(false);
   const [queryRef, setQueryFocus] = useFocus();
+  const [queryClearShowing, setQueryClearShowing] = useState(
+    !!filter.searchTerm
+  );
   const perPageSelect = useRef(null);
   const [perPageInput, perPageFocus] = useFocus();
 
@@ -99,6 +103,14 @@ export const ListFilter: React.FC<IListFilterProps> = ({
 
   function onChangeQuery(event: React.FormEvent<HTMLInputElement>) {
     searchCallback(event.currentTarget.value);
+    setQueryClearShowing(!!event.currentTarget.value);
+  }
+
+  function onClearQuery() {
+    queryRef.current.value = "";
+    searchCallback("");
+    setQueryFocus();
+    setQueryClearShowing(false);
   }
 
   function onChangeSortDirection() {
@@ -217,7 +229,17 @@ export const ListFilter: React.FC<IListFilterProps> = ({
               onInput={onChangeQuery}
               className="query-text-field bg-secondary text-white border-secondary"
             />
-
+            <Button
+              variant="secondary"
+              onClick={onClearQuery}
+              title={intl.formatMessage({ id: "actions.clear" })}
+              className={cx(
+                "query-text-field-clear",
+                queryClearShowing ? "" : "d-none"
+              )}
+            >
+              <Icon icon="times" />
+            </Button>
             <InputGroup.Append>
               <OverlayTrigger
                 placement="top"

ui/v2.5/src/components/List/styles.scss

@@ -30,6 +30,27 @@ input[type="range"].zoom-slider {
   width: 50%;
 }
 
+.query-text-field-clear {
+  background-color: $secondary;
+  color: $text-muted;
+  font-size: $btn-font-size-sm;
+  margin: $btn-padding-y $btn-padding-x;
+  padding: 0;
+  position: absolute;
+  right: 3em;
+  z-index: 4;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled):active:focus {
+    background-color: $secondary;
+    border-color: transparent;
+    box-shadow: none;
+  }
+}
+
 .saved-filter-list-menu {
   width: 300px;
 

ui/v2.5/src/locales/en-GB.json

@@ -11,6 +11,7 @@
     "backup": "Backup",
     "cancel": "Cancel",
     "clean": "Clean",
+    "clear": "Clear",
     "clear_back_image": "Clear back image",
     "clear_front_image": "Clear front image",
     "clear_image": "Clear Image",