Fixes

Author: Yadro

src/modules/tasks/TaskStore.ts

@@ -292,3 +292,22 @@ export default class TaskStore {
     this.versionHash = uuid();
   }
 }
+
+export function createTask(title: string) {
+  const { tasksStore, projectStore } = rootStore;
+  tasksStore.add(
+    new TaskModel({
+      key: uuid(),
+      title,
+      projectId: projectStore.activeProject,
+      active: false,
+      time: [],
+      checked: false,
+      children: [],
+      datesInProgress: [],
+      details: [],
+      parent: undefined, // Add into root
+      expanded: true,
+    })
+  );
+}

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

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
 import { createUseStyles } from 'react-jss';
 
 import { createTaskStore } from '../store/CreateTaskStore';
+import { createTask } from '../../../../../modules/tasks/TaskStore';
 
 type Props = {
   text: string;
@@ -12,10 +13,10 @@ type Props = {
 const SuggestionComp: FC<Props> = ({ text }: Props) => {
   const $ = useStyle();
 
-  const handleApplySuggestion = useCallback(
-    () => createTaskStore.applySuggestion(text),
-    [text]
-  );
+  const handleApplySuggestion = useCallback(() => {
+    createTask(text);
+    createTaskStore.afterApplySuggestion();
+  }, [text]);
 
   return (
     <Button

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

@@ -1,11 +1,9 @@
-import React, { ChangeEvent, KeyboardEvent, useEffect, useRef } from 'react';
+import React, { ChangeEvent, KeyboardEvent } from 'react';
 import { Input } from 'antd';
 import { observer } from 'mobx-react';
-import { v4 as uuid } from 'uuid';
 
-import rootStore from '../../../../modules/RootStore';
-import TaskModel from '../../../../modules/tasks/models/TaskModel';
 import { createTaskStore } from './store/CreateTaskStore';
+import { createTask } from '../../../../modules/tasks/TaskStore';
 
 interface Props {
   className?: string;
@@ -14,22 +12,7 @@ interface Props {
 const handleCreateTask = (event: KeyboardEvent) => {
   // Hotkey: Enter
   if (event.key === 'Enter') {
-    const { tasksStore, projectStore } = rootStore;
-    tasksStore.add(
-      new TaskModel({
-        key: uuid(),
-        title: createTaskStore.input,
-        projectId: projectStore.activeProject,
-        active: false,
-        time: [],
-        checked: false,
-        children: [],
-        datesInProgress: [],
-        details: [],
-        parent: undefined, // Add into root
-        expanded: true,
-      })
-    );
+    createTask(createTaskStore.input);
     createTaskStore.clear();
   }
 };
@@ -40,15 +23,8 @@ const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
 const handleFocus = () => createTaskStore.setFocus(true);
 
 export default observer(function TaskInput({ className }: Props) {
-  const inputRef = useRef<Input>(null);
-
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, [createTaskStore.focusTrigger]);
-
   return (
     <Input
-      ref={inputRef}
       className={className}
       placeholder="Create task..."
       onKeyPress={handleCreateTask}

src/screens/projects/components/CreateTask/store/CreateTaskStore.ts

@@ -3,7 +3,8 @@ import { computed, makeAutoObservable } from 'mobx';
 class CreateTaskStore {
   input: string = '';
   inputFocus: boolean = false;
-  focusTrigger: boolean = false; // TODO better solution?
+
+  isInputEmpty = computed(() => this.input.length === 0);
 
   constructor() {
     makeAutoObservable(this);
@@ -13,17 +14,15 @@ class CreateTaskStore {
     return (this.input = value);
   }
 
-  applySuggestion(value: string) {
-    this.setInput(value);
-    this.focusTrigger = !this.focusTrigger;
+  afterApplySuggestion() {
+    this.clear();
+    createTaskStore.setFocus(false);
   }
 
   clear() {
     return (this.input = '');
   }
 
-  isInputEmpty = computed(() => this.input.length === 0);
-
   setFocus(isFocus: boolean) {
     this.inputFocus = isFocus;
   }