diff --git a/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx b/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx index 256b88455..87be96063 100644 --- a/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx @@ -7,8 +7,8 @@ * @format */ -import {HistoryOutlined, MenuOutlined} from '@ant-design/icons'; -import {Button, Dropdown, Input, AutoComplete, InputRef} from 'antd'; +import {HistoryOutlined, MenuOutlined, SwapOutlined} from '@ant-design/icons'; +import {Button, Dropdown, Input, AutoComplete, InputRef, Tooltip} from 'antd'; import React, {memo, useCallback, useMemo} from 'react'; import styled from '@emotion/styled'; @@ -86,6 +86,9 @@ export const TableSearch = memo(function TableSearch({ }, [dispatch], ); + const toggleHideResults = useCallback(() => { + dispatch({type: 'toggleSearchValue'}); + }, [dispatch]); const onKeyDown = useCallback( (e: React.KeyboardEvent) => { switch (e.key) { @@ -174,12 +177,16 @@ export const TableSearch = memo(function TableSearch({ suffix={ <> {options.length ? ( - { - toggleSearchDropdown(!showHistory); - }}> - - + + { + toggleSearchDropdown(!showHistory); + }}> + + + ) : null} .* + + { + toggleHideResults(); + }}> + + + } onChange={(e) => {