Enable/Disable pair not working

Tell us about your environment

Wrongly assigned this to eslint first (https://github.com/eslint/eslint/issues/12125)

ESLint Version: 6.1.0
Node Version: v11.13.0
npm Version: 6.7.0

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

babel-eslint: 10.0.2

Please show your full configuration:

Configuration

```js { parser: '@typescript-eslint/parser', env: { "browser": true, "node": true }, plugins: ['@typescript-eslint', 'jest', 'hapi', 'import', 'cypress',], extends: [ 'airbnb', 'plugin:eslint-comments/recommended', 'plugin:@typescript-eslint/recommended', ], parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: 2018, useJSXTextNode: true, project: './tsconfig.json', tsconfigRootDir: './', extraFileExtensions: ['.tsx'], }, overrides: [ { files: [ 'src/**/*.story.js', 'packages/**/*.story.js', '**/*.stories.ts', '**/*.stories.tsx', '**/setupTests.ts', ], rules: { 'import/no-extraneous-dependencies': [ 'error', { devDependencies: true, }, ], 'react/jsx-no-literals': 0, }, }, { files: [ '**/*.spec.tsx', '**/*.spec.ts', ], plugins: [ 'jest', ], env: { jest: true, }, rules: { 'jest/no-disabled-tests': 'warn', 'jest/no-focused-tests': 'error', 'jest/no-identical-title': 'error', 'jest/prefer-to-have-length': 'warn', 'jest/valid-expect': 'error', 'react/react-in-jsx-scope': 0, 'import/no-extraneous-dependencies': [ 'error', { devDependencies: true, }, ], }, }, { files: ['*.ts', '*.tsx'], rules: { '@typescript-eslint/camelcase': [2, { ignoreDestructuring: true }], 'lines-between-class-members': [0], '@typescript-eslint/no-unused-vars': [2, { args: 'none' }], 'react/jsx-curly-spacing': [2, "always"], 'padded-blocks': [0], 'import/no-extraneous-dependencies': [ 1, ], }, }, { files: [ '**/*.definitions.ts' ], rules: { 'import/prefer-default-export': 0 } }, { files: [ '**/setup-tests.ts', '**/*.spec.ts', '**/*.spec.tsx', '**/*.stories.tsx', ], rules: { '@typescript-eslint/no-explicit-any': [0], 'react/jsx-no-literals': [0], '@typescript-eslint/explicit-function-return-type': [ 2, { allowExpressions: true, }, ], 'import/no-extraneous-dependencies': [ 2, { devDependencies: true, }, ], }, }, { files: ['**/*.tsx'], rules: { 'react/jsx-filename-extension': [ 1, { extensions: ['.tsx'], }, ], }, }, { files: ['config/**', 'scripts/**', '.takeoff/**'], rules: { 'import/no-extraneous-dependencies': 0, 'react/no-array-index-key': 0, '@typescript-eslint/no-var-requires': 0, 'no-console': 0, }, }, ], rules: { '@typescript-eslint/indent': 0, 'max-len': [ 0, { code: 120, ignoreComments: true, ignoreTralingCommas: true, ignoreUrls: true, ignoreStrings: true, ignoreTemplateLiterals: true, } ] }, settings: { 'import/extensions': ['.ts', '.tsx'], 'import/parsers': { '@typescript-eslint/parser': ['.ts', '.tsx'], }, 'import/resolver': { typescript: {}, node: { extensions: ['.ts', '.tsx'], }, }, 'import/ignore': ['utils'], }, } ```

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

function Checkbox({
  isChecked = false,
  onChange,
}: CheckboxProps): FunctionComponentElement<CheckboxProps> {
  const [internalCheckedState, setInternalCheckedState] = useState(isChecked);

  const classNames = cn(styles.root, {
    [styles.isChecked]: internalCheckedState,
  });

  function toggle(): void {
    const state = !internalCheckedState;
    setInternalCheckedState(state);
    if (onChange) onChange(state);
  }

  /* eslint-disable jsx-a11y/no-static-element-interactions */
  /* eslint-disable jsx-a11y/click-events-have-key-events */
  return (
    <div className={ classNames } onClick={ toggle } />
  );
  /* eslint-enable jsx-a11y/no-static-element-interactions */
  /* eslint-enable jsx-a11y/click-events-have-key-events */
}

eslint './src/**/*.{ts,tsx}'

What did you expect to happen? The enable/disable pair should work properly

What actually happened? Please include the actual, raw output from ESLint. It does not : /

./src/components/form/checkbox/checkbox.tsx
  Line 1:  Requires 'eslint-enable' directive for 'jsx-a11y/no-static-element-interactions'  eslint-comments/disable-enable-pair
  Line 2:  Requires 'eslint-enable' directive for 'jsx-a11y/click-events-have-key-events'    eslint-comments/disable-enable-pair

I played around a bit and found out that this only happens when the element inside of the JSX/HTML part is self closing, so i guess it's kind of a parsing error? It also seems to be irrelevant what rule you want to enable/disable.

Screenshot 2019-08-19 at 18 32 41 Screenshot 2019-08-19 at 18 50 37

Tried @platinumazure 's suggestion and also your recommended way of disabling multiple rules but this did not work either.

Screenshot 2019-08-20 at 10 35 00 Screenshot 2019-08-20 at 10 43 46

Are you willing to submit a pull request to fix this bug?

I would need to dig into the source code which i do not not have the time to do right now due to project pressure. If this issue is still present in never versions and does affect many people i would try to investigate and open a pr in my spare time

mysticatea / eslint-plugin-eslint-comments

Enable/Disable pair not working #32