diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx index 2afacb233..9c42f0111 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx @@ -24,12 +24,13 @@ export type PowerSearchTermFinderRef = { type PowerSearchTermFinderProps = { options: PowerSearchTermFinderOptionGroup[]; onSelect: (selectedOption: PowerSearchTermFinderOption) => void; + onBackspacePressWhileEmpty: () => void; }; export const PowerSearchTermFinder = React.forwardRef< PowerSearchTermFinderRef, PowerSearchTermFinderProps ->(({options, onSelect}, ref) => { +>(({options, onSelect, onBackspacePressWhileEmpty}, ref) => { const [searchTermFinderValue, setSearchTermFinderValue] = React.useState< string | null >(null); @@ -62,6 +63,9 @@ export const PowerSearchTermFinder = React.forwardRef< if (event.key === 'Enter') { setSearchTermFinderValue(null); } + if (event.key === 'Backspace' && !searchTermFinderValue) { + onBackspacePressWhileEmpty(); + } }} /> ); diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx index 7be8ac49d..b94114718 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx @@ -146,6 +146,14 @@ export const PowerSearch: React.FC = ({ }, ]); }} + onBackspacePressWhileEmpty={() => { + setSearchExpression((prevSearchExpression) => { + return prevSearchExpression.slice( + 0, + prevSearchExpression.length - 1, + ); + }); + }} /> );