Refactoring

Author: Yadro

src/screens/projects/components/CreateTask/CreateTask.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo, useRef } from 'react';
+import React, { FC, useRef } from 'react';
 import { observer } from 'mobx-react';
 
 import TaskInput from './TaskInput';
@@ -13,11 +13,9 @@ const CreateTask: FC = () => {
 
   useOutsideClick(ref, handleBlur);
 
-  const showSuggestions = useMemo(() => createTaskStore.isInputEmpty, []).get();
-
   return (
     <div ref={ref}>
-      {showSuggestions && createTaskStore.inputFocus && <Suggestions />}
+      <Suggestions />
       <TaskInput />
     </div>
   );

src/screens/projects/components/CreateTask/Suggestions/Suggestions.tsx

@@ -4,6 +4,7 @@ import { createUseStyles } from 'react-jss';
 
 import rootStore from '../../../../../modules/RootStore';
 import Suggestion from './Suggestion';
+import { createTaskStore } from '../store/CreateTaskStore';
 
 const Suggestions: FC = () => {
   const $ = useStyle();
@@ -13,8 +14,16 @@ const Suggestions: FC = () => {
     []
   ).get();
 
+  const showSuggestions = useMemo(() => createTaskStore.isInputEmpty, []).get();
+
+  const isVisible =
+    showSuggestions && createTaskStore.inputFocus && !!suggestions.length;
+
   return (
-    <div className={$.suggestions}>
+    <div
+      className={$.suggestions}
+      style={{ display: isVisible ? undefined : 'none' }}
+    >
       {suggestions.map((suggestion) => (
         <Suggestion key={suggestion.text} text={suggestion.text} />
       ))}