diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx index 691d90b23efef..3aae21070f72a 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx @@ -29,29 +29,13 @@ export const InlineTextInput: FunctionComponent = ({ 'pipelineProcessorsEditor__item__textContainer--notEditing': !isShowingTextInput && !disabled, }); - const content = - isShowingTextInput && !disabled ? ( - el?.focus()} - onChange={(event) => setTextValue(event.target.value)} - /> - ) : ( - -
- {text || {placeholder}} -
-
- ); - const submitChange = useCallback(() => { - setIsShowingTextInput(false); - onChange(textValue); + // Give any on blur handlers the chance to complete if the user is + // tabbing over this component. + setTimeout(() => { + setIsShowingTextInput(false); + onChange(textValue); + }); }, [setIsShowingTextInput, onChange, textValue]); useEffect(() => { @@ -71,14 +55,31 @@ export const InlineTextInput: FunctionComponent = ({ }; }, [isShowingTextInput, submitChange, setIsShowingTextInput]); - return ( + return isShowingTextInput && !disabled ? ( +
+ el?.focus()} + onChange={(event) => setTextValue(event.target.value)} + /> +
+ ) : (
setIsShowingTextInput(true)} - onBlur={submitChange} > - {content} + +
+ {text || {placeholder}} +
+
); };