TSK-831: Edit issue fixes (#3140)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte

@@ -24,15 +24,17 @@
   import {
     Button,
     EditBox,
+    FocusHandler,
     IconMixin,
     IconMoreH,
     Label,
     Spinner,
+    createFocusManager,
     getCurrentResolvedLocation,
     navigate,
     showPopup
   } from '@hcengineering/ui'
-  import { ContextMenu, DocNavLink, UpDownNavigator } from '@hcengineering/view-resources'
+  import { ActionContext, ContextMenu, DocNavLink, UpDownNavigator } from '@hcengineering/view-resources'
   import { createEventDispatcher, onDestroy, onMount } from 'svelte'
   import { generateIssueShortLink, getIssueId } from '../../../issues'
   import tracker from '../../../plugin'
@@ -139,8 +141,23 @@
   onMount(() => {
     dispatch('open', { ignoreKeys: ['comments', 'name', 'description', 'number'] })
   })
+
+  const manager = createFocusManager()
+  export function canClose (): boolean {
+    if (descriptionBox.isFocused()) {
+      return false
+    }
+    return true
+  }
 </script>
 
+<FocusHandler {manager} />
+<ActionContext
+  context={{
+    mode: 'editor'
+  }}
+/>
+
 {#if issue !== undefined}
   <Panel
     object={issue}
@@ -181,10 +198,17 @@
         {/if}
       </div>
     {/if}
-    <EditBox bind:value={title} placeholder={tracker.string.IssueTitlePlaceholder} kind="large-style" on:blur={save} />
+    <EditBox
+      focusIndex={1}
+      bind:value={title}
+      placeholder={tracker.string.IssueTitlePlaceholder}
+      kind="large-style"
+      on:blur={save}
+    />
     <div class="w-full mt-6">
       {#key issue._id}
         <AttachmentStyledBox
+          focusIndex={30}
           bind:this={descriptionBox}
           useAttachmentPreview={true}
           objectId={_id}
@@ -207,7 +231,12 @@
     <div class="mt-6">
       {#key issue._id && currentProject !== undefined}
         {#if currentProject !== undefined}
-          <SubIssues {issue} shouldSaveDraft projects={new Map([[currentProject?._id, currentProject]])} />
+          <SubIssues
+            focusIndex={50}
+            {issue}
+            shouldSaveDraft
+            projects={new Map([[currentProject?._id, currentProject]])}
+          />
         {/if}
       {/key}
     </div>

plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte

@@ -15,6 +15,7 @@
 <script lang="ts">
   import { Doc, DocumentQuery, Ref } from '@hcengineering/core'
   import { Issue, Project } from '@hcengineering/tracker'
+  import { registerFocus } from '@hcengineering/ui'
   import { ViewOptions, Viewlet } from '@hcengineering/view'
   import {
     ActionContext,
@@ -42,6 +43,25 @@
       list?.select(offset, of)
     }
   })
+  let docs: Doc[] = []
+  function select () {
+    listProvider.update(docs)
+    listProvider.updateFocus(docs[0])
+    list?.select(0, undefined)
+  }
+
+  // Focusable control with index
+  let focused = false
+  export let focusIndex = -1
+  registerFocus(focusIndex, {
+    focus: () => {
+      ;(window.document.activeElement as HTMLElement).blur()
+      focused = true
+      select()
+      return true
+    },
+    isFocus: () => focused
+  })
 </script>
 
 <ActionContext
@@ -70,6 +90,7 @@
       listProvider.updateSelection(event.detail.docs, event.detail.value)
     }}
     on:content={(evt) => {
+      docs = evt.detail
       listProvider.update(evt.detail)
     }}
   />

plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte

@@ -70,6 +70,8 @@
   }
 
   $: viewOptions = viewlet !== undefined ? getViewOptions(viewlet, $viewOptionStore) : undefined
+
+  export let focusIndex = -1
 </script>
 
 <div class="flex-between">
@@ -139,7 +141,13 @@
     {#if !isCollapsed}
       <ExpandCollapse isExpanded={!isCollapsed}>
         <div class="list" class:collapsed={isCollapsed}>
-          <SubIssueList projects={_projects} {viewlet} {viewOptions} query={{ attachedTo: issue._id }} />
+          <SubIssueList
+            focusIndex={focusIndex === -1 ? -1 : focusIndex + 1}
+            projects={_projects}
+            {viewlet}
+            {viewOptions}
+            query={{ attachedTo: issue._id }}
+          />
         </div>
       </ExpandCollapse>
     {/if}