diff --git a/x-pack/plugins/security_solution/public/cases/components/add_comment/index.tsx b/x-pack/plugins/security_solution/public/cases/components/add_comment/index.tsx
index 14c42697dcbb4..3e3d21b9926d1 100644
--- a/x-pack/plugins/security_solution/public/cases/components/add_comment/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/add_comment/index.tsx
@@ -12,7 +12,6 @@ import { CommentRequest } from '../../../../../case/common/api';
import { usePostComment } from '../../containers/use_post_comment';
import { Case } from '../../containers/types';
import { MarkdownEditorForm } from '../../../common/components/markdown_editor/eui_form';
-import { InsertTimelinePopover } from '../../../timelines/components/timeline/insert_timeline_popover';
import { useInsertTimeline } from '../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline';
import { Form, useForm, UseField, useFormData } from '../../../shared_imports';
@@ -61,10 +60,7 @@ export const AddComment = React.memo(
setFieldValue,
]);
- const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline(
- comment,
- onCommentChange
- );
+ const { handleCursorChange } = useInsertTimeline(comment, onCommentChange);
const addQuote = useCallback(
(quote) => {
@@ -116,13 +112,6 @@ export const AddComment = React.memo(
{i18n.ADD_COMMENT}
),
- topRightContent: (
-
- ),
}}
/>
diff --git a/x-pack/plugins/security_solution/public/cases/components/create/index.tsx b/x-pack/plugins/security_solution/public/cases/components/create/index.tsx
index b7a80bcf6633c..42633c5d2ccf8 100644
--- a/x-pack/plugins/security_solution/public/cases/components/create/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/create/index.tsx
@@ -28,7 +28,6 @@ import {
} from '../../../shared_imports';
import { usePostCase } from '../../containers/use_post_case';
import { schema, FormProps } from './schema';
-import { InsertTimelinePopover } from '../../../timelines/components/timeline/insert_timeline_popover';
import { useInsertTimeline } from '../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline';
import { MarkdownEditorForm } from '../../../common/components/markdown_editor/eui_form';
import { useGetTags } from '../../containers/use_get_tags';
@@ -136,10 +135,7 @@ export const Create = React.memo(() => {
setFieldValue,
]);
- const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline(
- description,
- onDescriptionChange
- );
+ const { handleCursorChange } = useInsertTimeline(description, onDescriptionChange);
const handleTimelineClick = useTimelineClick();
@@ -221,20 +217,13 @@ export const Create = React.memo(() => {
isDisabled: isLoading,
onClickTimeline: handleTimelineClick,
onCursorPositionUpdate: handleCursorChange,
- topRightContent: (
-
- ),
}}
/>
>
),
}),
- [isLoading, options, handleCursorChange, handleTimelineClick, handleOnTimelineChange]
+ [isLoading, options, handleCursorChange, handleTimelineClick]
);
const secondStep = useMemo(
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx
index 641a4105e1af1..a80576c7237f4 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx
@@ -16,7 +16,7 @@ import {
EuiFilterGroup,
EuiFilterButton,
} from '@elastic/eui';
-import { isEmpty } from 'lodash/fp';
+import { isEmpty, debounce } from 'lodash/fp';
import React, { memo, useCallback, useMemo, useState, useEffect, useRef } from 'react';
import styled from 'styled-components';
@@ -120,9 +120,14 @@ const SelectableTimelineComponent: React.FC = ({
const selectableListOuterRef = useRef(null);
const selectableListInnerRef = useRef(null);
- const onSearchTimeline = useCallback((val) => {
- setSearchTimelineValue(val);
- }, []);
+ const debouncedSetSearchTimelineValue = useMemo(() => debounce(500, setSearchTimelineValue), []);
+
+ const onSearchTimeline = useCallback(
+ (val) => {
+ debouncedSetSearchTimelineValue(val);
+ },
+ [debouncedSetSearchTimelineValue]
+ );
const handleOnToggleOnlyFavorites = useCallback(() => {
setOnlyFavorites(!onlyFavorites);
@@ -238,7 +243,7 @@ const SelectableTimelineComponent: React.FC = ({
isLoading: loading,
placeholder: useMemo(() => i18n.SEARCH_BOX_TIMELINE_PLACEHOLDER(timelineType), [timelineType]),
onSearch: onSearchTimeline,
- incremental: false,
+ incremental: true,
inputRef: (node: HTMLInputElement | null) => {
setSearchRef(node);
},