remove classname

elastic · Oct 29, 2020 · 44a6cac · 44a6cac
1 parent 43104b5
commit 44a6cac
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 16 deletions.
diff --git a/...s/security_solution/public/timelines/components/timeline/header/title_and_description.tsx b/...s/security_solution/public/timelines/components/timeline/header/title_and_description.tsx
@@ -151,7 +151,6 @@ export const TimelineTitleAndDescription = React.memo<TimelineTitleAndDescriptio
             <EuiFormRow label={TIMELINE_TITLE}>
               <Name
                 autoFocus={true}
-                className="timeline-modal-title"
                 disableTooltip={true}
                 disableAutoSave={true}
                 disabled={isSaving}

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx
@@ -18,7 +18,7 @@ import {
   EuiToolTip,
   EuiTextArea,
 } from '@elastic/eui';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import uuid from 'uuid';
 import styled from 'styled-components';
 import { useDispatch } from 'react-redux';
@@ -200,7 +200,6 @@ Description.displayName = 'Description';
 
 interface NameProps {
   autoFocus?: boolean;
-  className?: string;
   disableAutoSave?: boolean;
   disableTooltip?: boolean;
   disabled?: boolean;
@@ -215,7 +214,6 @@ interface NameProps {
 export const Name = React.memo<NameProps>(
   ({
     autoFocus = false,
-    className = TIMELINE_TITLE_CLASSNAME,
     disableAutoSave = false,
     disableTooltip = false,
     disabled = false,
@@ -226,23 +224,18 @@ export const Name = React.memo<NameProps>(
     width,
     marginRight,
   }) => {
+    const timelineNameRef = useRef<HTMLInputElement>(null);
+
     const handleChange = useCallback(
       (e) => updateTitle({ id: timelineId, title: e.target.value, disableAutoSave }),
       [timelineId, updateTitle, disableAutoSave]
     );
 
     useEffect(() => {
-      const focusInput = () => {
-        const elements = document.querySelector<HTMLElement>(`.${className}`);
-
-        if (elements != null) {
-          elements.focus();
-        }
-      };
-      if (autoFocus) {
-        focusInput();
+      if (autoFocus && timelineNameRef && timelineNameRef.current) {
+        timelineNameRef.current.focus();
       }
-    }, [autoFocus, className]);
+    }, [autoFocus]);
 
     const nameField = useMemo(
       () => (
@@ -258,10 +251,10 @@ export const Name = React.memo<NameProps>(
           value={title}
           width={width}
           marginRight={marginRight}
-          className={className}
+          inputRef={timelineNameRef}
         />
       ),
-      [handleChange, marginRight, timelineType, title, width, className, disabled]
+      [handleChange, marginRight, timelineType, title, width, disabled]
     );
 
     return (