this is great and will need to take a look, but when using arrow keys we need to move entire elements to either side to replace with, because unlike the mouse we cannot incrementally move and wait for half way point to initiate a move. using arrow keys it shoudl always move in that direction so code needs to check what is say the element above and move itself to the beginning of that element top postion and let the code figure out what it means (swap, push down, etc...). You shoudl be able to do that using update(el) and placing where the other target is instead.

I tried it with update, and things move around only they move behind the other items they do not update the position of the other elements. I removed all the calls to trigger the mouseEvents. This is what you meant right ? I can probably figure out which items overlap but how to determine the position they need to move to ? we use items with different heights and widths. So it not always as easy to say just swap them around.
`
protected _keyMove(e: KeyboardEvent) {
if (e.code === 'Space') {
e.preventDefault()

  this.keyboardSelected.classList.remove('grid-stack-item-selected')
  this.keyboardSelected.dispatchEvent(new MouseEvent('mouseup'))
  document.removeEventListener('keydown', this._keyMove)

  return
}

if (e.code === 'ArrowRight' ||
  e.code === 'ArrowLeft' ||
  e.code === 'ArrowUp' ||
  e.code === 'ArrowDown') {
  e.preventDefault()

  this._itemPosition(e.code)

  this.keyboardSelected = this._selectedItem(this.keyboardSelected)
  this.keyboardSelected.scrollIntoView({ block: "center" })
}

}

protected _itemPosition(code: string) {
const grid = this.el.gridstackNode?.grid
const node = this.el.gridstackNode
const maxColumn = node.grid.opts.column
const cellHeight = node.h

switch (code) {
case 'ArrowRight':
  if(typeof(maxColumn) == 'number' && node.x === (maxColumn - 1)) { break }

  node.x = node.x + 1
  break
case 'ArrowLeft':
  if (node.x === 0) { break }

  node.x = node.x - 1

  break
case 'ArrowUp':
  if (node.y === 0) { break }

  node.y = node.y - cellHeight
  break
case 'ArrowDown':
  node.y = node.y + cellHeight

  break
}

grid.update(this.keyboardSelected, node)

// grid.commit() / grid.save() both dont do anything
}
`

I figured somethings out without using update, maybe it will work with update as well. I will update this branch tomorrow

I fixed a lot of edge cases we had.
i also tried this with update but i still had the same issue as before the item moves but it moves behind the other elements and nothing updates