react/jsx-sort-props breaks the code

[davesnx]

Tell us about your environment

"babel-eslint": "^9.0.0",
"eslint": "5.6.0",
"eslint-plugin-react": "^7.11.1"

• ESLint Version: 9.0.0
• Node Version: 10.6.0
• npm Version: -
• yarn Version: 1.9.4

What parser (default, Babel-ESLint, etc.) are you using?
Babel-ESLint

Please show your full configuration:
I created a repo to reproduce the bug: https://github.com/davesnx/eslint-bug-react-sort-props

Configuration

module.exports = {
  parser: 'babel-eslint',
  plugins: ['react'],
  rules: {
    'react/jsx-sort-props': 1
  }
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

import React, { Component } from 'react'
import PropTypes from 'prop-types'

const PictureChoice = () => {
  return (
    <List
      className={className}
      onStageAnswer={onStageAnswer}
      onCommitAnswer={onCommitAnswer}
      isFocused={isFocused}
      direction={direction}
      allowMultipleSelection={allowMultipleSelection}
      measureLongestChildNode={measureLongestChildNode}
      layoutItemsSize={layoutItemsSize}
      handleAppScroll={handleAppScroll}
      isActive={isActive}
      resetSelection={resetSelection}
      onKeyboardChoiceHovered={onKeyboardChoiceHovered}
      keyboardShortcutType
    />
  )
}

export default PictureChoice

npx eslint . --fix

What did you expect to happen?
So theorically the rule should re-order my props, in the worst case scenario, not sort them. But actually is breaking them. It's a weird output:

import React, { Component } from 'react'
import PropTypes from 'prop-types'

const PictureChoice = () => {
  return (
    <List
      allowMultipleSelection={allowMultipleSelection}
      className={className}
      direction={direction}
      isFocused=handleAppScroll={handleAppScroll}ection=isActive={isActive}owMultiplisFocused={isFocused}ardShortcutType
      layoutItemsSize={layoutItemsSl
      layoutItemsSize={layoutItemsSize}
      handleAppScroll={handleAppScroll}
      isActive={isActive}
      resetSelection={resetSelection}
      onKeyboardChoiceHovered={onKeyboardChoiceHovered}
      keyboardShortcutType
    />
  )
}

export default PictureChoice

It's actually trying to sort in a weird way, and it's not consistent.
Happens with a boolean props as well

      isFocused=
      
      handleAppScroll={handleAppScroll}
      
      ection=
      
      isActive={isActive}
      
      owMultiplisFocused={isFocused}
      
      ardShortcutType
      layoutItemsSize={layoutItemsSl
      

[ljharb]

Does this only happen with babel-eslint?

[alexzherdev]

I think this is a duplicate of #1922. This rule doesn’t make an attempt of handling multiline props properly :/

[ljharb]

In that case we should entirely disable the autofixer, pending making it behave properly.

[julia-dizhak]

the same happens for me with autofixer