diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchStringTerm.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchStringTerm.tsx index 4c3ef860f..32d237ab4 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchStringTerm.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchStringTerm.tsx @@ -7,38 +7,49 @@ * @format */ -import {Input} from 'antd'; +import {Button, Input} from 'antd'; import React from 'react'; type PowerSearchStringTermProps = { onCancel: () => void; onChange: (value: string) => void; + defaultValue?: string; }; export const PowerSearchStringTerm: React.FC = ({ onCancel, onChange, + defaultValue, }) => { - return ( - { - const newValue = event.target.value; + const [editing, setEditing] = React.useState(!defaultValue); - if (!newValue) { - onCancel(); - return; - } + if (editing) { + return ( + { + const newValue = event.target.value; - onChange(newValue); - }} - onKeyDown={(event) => { - if (event.key === 'Enter' || event.key === 'Escape') { - event.currentTarget.blur(); - } - }} - /> - ); + setEditing(false); + + if (!newValue) { + onCancel(); + return; + } + + onChange(newValue); + }} + onKeyDown={(event) => { + if (event.key === 'Enter' || event.key === 'Escape') { + event.currentTarget.blur(); + } + }} + defaultValue={defaultValue} + /> + ); + } + + return ; }; diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx index b00b5601c..3df20f1ff 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx @@ -57,6 +57,7 @@ export const PowerSearchTerm: React.FC = ({ searchValue: newValue, }); }} + defaultValue={searchTerm.searchValue} /> ); break; @@ -164,6 +165,21 @@ export const PowerSearchTerm: React.FC = ({ } } else { switch (searchTerm.operator.valueType) { + case 'STRING': { + searchValueComponent = ( + { + onFinalize({ + ...searchTerm, + searchValue: newValue, + }); + }} + defaultValue={searchTerm.searchValue} + /> + ); + break; + } case 'ENUM': { searchValueComponent = (