Reordering of issues under Epic breaks when an item is moved to the top

When an item from list of related issues under an Epic is reordered, JS throws an error when user tries to move an item to the top.

raven.js:302 Uncaught TypeError: Cannot read property 'epic_issue_id' of undefined
    at s.reordered (related_issues_block.vue:104)
    at e.n (vue.esm.js:188)
    at c (Sortable.js:1188)
    at e._onDrop (Sortable.js:892)
    at HTMLDocument.n (raven.js:298)

The possible cause of error is due to line at app/assets/javascripts/issuable/related_issues/components/related_issues_block.vue#L111.

Here's how it happens,

  • User tries to move item from anywhere in the list to the top
  • Then event.newIndex is zero
  • We do this.relatedIssues[event.newIndex - 1].epic_issue_id
  • That leads to this.relatedIssues[-1].epic_issue_id