Wrong auto-format of ES7 arrow functions leads to invalid/broken code

When using ES7 arrow function in QML the editor's auto-format tries to refactor them to normal functions (i.e. non-anonymous functions using the function keyword), which does not work correctly.

So, for example, this:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
  visible: true
  width: 640
  height: 480
  title: qsTr("Hello World")

  Component.onCompleted: (x) => {
  console.log("Hello World")
  }
}
 

becomes this:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
  visible: true
  width: 640
  height: 480
  title: qsTr("Hello World")

  Component.onCompleted: function x
  console.log("Hello World")
}
}

Also, sometimes I get a completely messed up result where parts of the code are duplicated at the position of the function. This appears to be completely random, however. Thus I couldn't make it quite reproducible. But hitting Ctrl+S and Ctrl+Z a couple of times does the trick for me and gives me the following:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
  visible: true
  width: 640
  height: 480
  title: qsTr("Hello World")

  Component.onCompleted: function x t QtQuick 2.12
  import QtQuick.Window 2.12

  Window {
  visible: true
  width: 640
  height: 480
  title: qsTr("Hello World")

  Component.onCompleted: (x) => {
  console.log("Hello World")
  }
}

console.log("Hello World")
}
}

This makes arrow functions completely unusable in the QML editor since they will be refactored every time the file gets saved. As I see it, QML can properly work with arrow functions, anyways. Also, there is no logical reason why you would refactor an anonymous function to a regular one in the first place.