Prevent focus loss and redundant re-renders in the Tasks panel during editing and reordering

- in nested tasks,on an empty task, clicking the delete button, or anywhere outside the input field,  glitches it (it doesn't get deteled).
- when removing a task, while it is in edit mode, we briefly see 'edit' icon button

Author: robertpiosik

packages/ui/src/components/editor/panel/Tasks/Tasks.tsx

@@ -184,6 +184,9 @@ export const Tasks: React.FC<Props> = (props) => {
               {params.task.text && (
                 <IconButton
                   codicon_icon="forward"
+                  on_mouse_down={
+                    is_editing ? (e) => e.preventDefault() : undefined
+                  }
                   on_click={(e) => {
                     e.stopPropagation()
                     props.on_forward(params.task.text)
@@ -204,6 +207,9 @@ export const Tasks: React.FC<Props> = (props) => {
                       ? { cursor: 'default' }
                       : undefined
                   }
+                  on_mouse_down={
+                    is_editing ? (e) => e.preventDefault() : undefined
+                  }
                   on_click={(e) => {
                     e.stopPropagation()
                     navigator.clipboard.writeText(params.task.text)
@@ -233,6 +239,9 @@ export const Tasks: React.FC<Props> = (props) => {
               />
               <IconButton
                 codicon_icon="trash"
+                on_mouse_down={
+                  is_editing ? (e) => e.preventDefault() : undefined
+                }
                 on_click={(e) => {
                   e.stopPropagation()
                   props.on_delete(params.task.created_at)

packages/ui/src/components/editor/panel/Tasks/components/TaskGroup.tsx

@@ -32,7 +32,15 @@ export const TaskGroup: React.FC<TaskGroupProps> = (props) => {
     <>
       <ReactSortable<SortableTask>
         list={props.items}
-        setList={props.on_reorder}
+        setList={(new_items) => {
+          if (
+            new_items.length !== props.items.length ||
+            new_items.every((it, index) => it.id == props.items[index].id)
+          ) {
+            return
+          }
+          props.on_reorder(new_items)
+        }}
         className={props.className}
         animation={150}
         filter="textarea"