diff --git a/ui/v2.5/src/components/Changelog/versions/v0110.md b/ui/v2.5/src/components/Changelog/versions/v0110.md index c1e69897d16..c5ca7342e16 100644 --- a/ui/v2.5/src/components/Changelog/versions/v0110.md +++ b/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)) diff --git a/ui/v2.5/src/components/List/ListFilter.tsx b/ui/v2.5/src/components/List/ListFilter.tsx index 41bd5e15aa3..ef2aa7c7f8d 100644 --- a/ui/v2.5/src/components/List/ListFilter.tsx +++ b/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 = ({ }) => { 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 = ({ function onChangeQuery(event: React.FormEvent) { 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 = ({ onInput={onChangeQuery} className="query-text-field bg-secondary text-white border-secondary" /> - +