template-click-events-have-key-events rule not recognizing key events with modifiers

[patricio-ezequiel-hondagneu-roig]

Describe the bug

I'm having a problem with the aforementioned rule when using modified key events.

For instance:

(keydown.enter)="handler()"

Context and configuration

• Rule: template-click-events-have-key-events
• Contents of tslint.json:

{
	"rules": {
		/* TSLint: TypeScript-specific */

		"adjacent-overload-signatures": true,
		"ban-ts-ignore": true,
		"ban-types": false,
		"member-access": [ true, "check-accessor", "check-constructor", "check-parameter-property" ],
		"member-ordering": [ true, {
			"order": [
				"static-field",
				"static-method",
				"instance-field",
				"constructor",
				"instance-method"
			],
			"alphabetize": false
		}],
		"no-any": true,
		"no-empty-interface": false,
		"no-for-in": true,
		"no-import-side-effect": false,
		"no-inferrable-types": false,
		"no-internal-module": true,
		"no-magic-numbers": true,
		"no-namespace": [ true, "allow-declarations" ],
		"no-non-null-assertion": true,
		"no-parameter-reassignment": true,
		"no-reference": true,
		"no-unnecessary-type-assertion": true,
		"no-var-requires": true,
		"only-arrow-functions": [ true, "allow-declarations", "allow-named-functions" ],
		"prefer-for-of": false,
		"promise-function-async": true,
		"typedef": false,
		"unified-signatures": false,

		/* TSLint: Functionality */

		"await-promise": true,
		"ban-comma-operator": true,
		"ban": [ true,
			{ "name": "eval", "message": "DON'T. JUST DON'T." },
			{ "name": "fdescribe", "message": "Please don't focus test suites." },
			{ "name": "fit", "message": "Please don't focus test cases." }
		],
		"curly": true,
		"forin": true,
		"function-constructor": true,
		"import-blacklist": false,
		"label-position": true,
		"no-arg": true,
		"no-async-without-await": false,
		"no-bitwise": true,
		"no-conditional-assignment": true,
		"no-console": true,
		"no-construct": true,
		"no-debugger": true,
		"no-duplicate-super": true,
		"no-duplicate-switch-case": true,
		"no-duplicate-variable": [ true, "check-parameters" ],
		"no-dynamic-delete": true,
		"no-empty": false,
		"no-eval": true,
		"no-floating-promises": false,
		"no-for-in-array": true,
		"no-implicit-dependencies": [ true, "dev", [ "src" ] ],
		"no-inferred-empty-object-type": true,
		"no-invalid-template-strings": false,
		"no-invalid-this": false,
		"no-misused-new": true,
		"no-null-keyword": false,
		"no-null-undefined-union": true,
		"no-object-literal-type-assertion": false,
		"no-promise-as-boolean": true,
		"no-restricted-globals": true,
		"no-return-await": true,
		"no-shadowed-variable": true,
		"no-sparse-arrays": true,
		"no-string-literal": true,
		"no-string-throw": true,
		"no-submodule-imports": false,
		"no-switch-case-fall-through": true,
		"no-tautology-expression": true,
		"no-this-assignment": true,
		"no-unbound-method": true,
		"no-unnecessary-class": false,
		"no-unsafe-any": false,
		"no-unsafe-finally": true,
		"no-unused-expression": false,
		"no-unused-variable": false,
		"no-var-keyword": true,
		"no-void-expression": [ true, "ignore-arrow-function-shorthand" ],
		"prefer-conditional-expression": false,
		"prefer-object-spread": true,
		"radix": false,
		"restrict-plus-operands": true,
		"static-this": true,
		"strict-boolean-expressions": false,
		"strict-comparisons": [ true, "allow-object-equal-comparison", "allow-string-order-comparison" ],
		"strict-string-expressions": false,
		"strict-type-predicates": false,
		"switch-default": false,
		"triple-equals": [ true, "allow-null-check", "allow-undefined-check" ],
		"unnecessary-constructor": true,
		"use-default-type-parameter": false,
		"use-isnan": true,

		/* TSLint: Mainatanability */

		"cyclomatic-complexity": [ true, 50 ],
		"deprecation": true,
		"invalid-void": false,
		"max-classes-per-file": false,
		"max-file-line-count": false,
		"no-default-export": true,
		"no-default-import": false,
		"no-duplicate-imports": false,
		"no-mergeable-namespace": false,
		"no-require-imports": true,
		"object-literal-sort-keys": false,
		"prefer-const": [ true, {
			"destructuring": "all"
		}],
		"prefer-readonly": true,

		/* TSLint: Style */

		"array-type": [ true, "array" ],
		"arrow-return-shorthand": false,
		"binary-expression-operand-order": true,
		"callable-types": false,
		"class-name": true,
		"comment-format": [ true, "check-space", "allow-trailing-lowercase" ],
		"comment-type": [ true, "singleline", "multiline", "doc" ],
		"completed-docs": [ true, {
			"classes": { "visibilities": [ "exported" ] },
			"properties": { "privacies": [ "public", "protected" ] },
			"methods": { "privacies": [ "public", "protected" ] },
			"functions": { "visibilities": [ "exported" ] },
			"variables": { "visibilities": [ "exported" ] },
			"enums": { "visibilities": [ "exported" ] },
			"interfaces": { "visibilities": [ "exported" ] },
			"types": { "visibilities": [ "exported" ] }
		}],
		"encoding": true,
		"file-header": false,
		"file-name-casing": [ true, "kebab-case" ],
		"increment-decrement": false,
		"interface-name": [ true, "never-prefix" ],
		"interface-over-type-literal": false,
		"match-default-export-name": false,
		"newline-per-chained-call": false,
		"no-angle-bracket-type-assertion": false,
		"no-boolean-literal-compare": false,
		"no-parameter-properties": false,
		"no-redundant-jsdoc": false,
		"no-reference-import": true,
		"no-unnecessary-callback-wrapper": false,
		"no-unnecessary-initializer": false,
		"no-unnecessary-qualifier": false,
		"object-literal-key-quotes": false,
		"object-literal-shorthand": false,
		"one-line": [ true, "check-open-brace" ],
		"one-variable-per-declaration": [ true, "ignore-for-loop" ],
		"ordered-imports": false,
		"prefer-function-over-method": false,
		"prefer-method-signature": false,
		"prefer-switch": false,
		"prefer-template": [ true, "allow-single-concat" ],
		"prefer-while": true,
		"return-undefined": true,
		"space-before-function-paren": [ true, {
			"anonymous": "never",
			"named": "never",
			"asyncArrow": "always",
			"method": "never",
			"constructor": "never"
		}],
		"space-within-parens": false,
		"switch-final-break": [ true, "always" ],
		"type-literal-delimiter": true,
		"unnecessary-bind": true,
		"unnecessary-else": false,
		"variable-name": [ true, "check-format", "allow-leading-underscore", "allow-pascal-case", "ban-keywords" ],

		/* TSLint: Format */

		"align": false,
		"arrow-parens": true,
		"eofline": false,
		"import-spacing": true,
		"indent": [ true, "tabs" ],
		"jsdoc-format": true,
		"linebreak-style": false,
		"max-line-length": [ true, {
			"limit": 120,
			"ignore-pattern": "^import |^export {(.*?)}|class [a-zA-Z]+ implements |//"
		}],
		"newline-before-return": false,
		"new-parens": true,
		"no-consecutive-blank-lines": [ true, 2 ],
		"no-irregular-whitespace": true,
		"no-trailing-whitespace": [ true, "ignore-template-strings", "ignore-comments", "ignore-jsdoc" ],
		"number-literal-format": true,
		"quotemark": [ true, "single", "avoid-escape" ],
		"semicolon": [ true, "always" ],
		"trailing-comma": false,
		"typedef-whitespace": [ true, {
			"call-signature": "nospace",
			"index-signature": "nospace",
			"parameter": "nospace",
			"property-declaration": "nospace",
			"variable-declaration": "nospace"
		}, {
			"call-signature": "onespace",
			"index-signature": "onespace",
			"parameter": "onespace",
			"property-declaration": "onespace",
			"variable-declaration": "onespace"
		}],
		"whitespace": [ true,
			"check-branch",
			"check-decl",
			"check-operator",
			"check-module",
			"check-separator",
			"check-rest-spread",
			"check-type",
			"check-typecast",
			"check-type-operator",
			"check-preblock",
			"check-postbrace"
		],

		/* Codelyzer: TypeScript-specific */

		"contextual-decorator": true,
		"contextual-lifecycle": true,
		"no-attribute-decorator": true,
		"no-lifecycle-call": true,
		"no-output-native": true,
		"no-pipe-impure": true,
		"prefer-on-push-component-change-detection": false,
		"template-accessibility-alt-text": true,
		"template-accessibility-elements-content": true,
		"template-accessibility-label-for": false,
		"template-accessibility-tabindex-no-positive": true,
		"template-accessibility-table-scope": true,
		"template-accessibility-valid-aria": true,
		"template-banana-in-box": true,
		"template-click-events-have-key-events": true,
		"template-mouse-events-have-key-events": true,
		"template-no-any": true,
		"template-no-autofocus": true,
		"template-no-distracting-elements": true,
		"template-no-negated-async": true,
		"use-lifecycle-interface": true,

		/* Codelyzer: Maintanability */

		"component-max-inline-declarations": false,
		"no-conflicting-lifecycle": true,
		"no-forward-ref": false,
		"no-input-prefix": false,
		"no-input-rename": true,
		"no-output-on-prefix": true,
		"no-output-rename": true,
		"no-unused-css": false,
		"prefer-output-readonly": true,
		"relative-url-prefix": false,
		"template-conditional-complexity": false,
		"template-cyclomatic-complexity": [ true, 50 ],
		"template-i18n": false,
		"template-no-call-expression": false,
		"template-use-track-by-function": false,
		"use-component-selector": true,
		"use-component-view-encapsulation": true,
		"use-pipe-decorator": true,
		"use-pipe-transform-interface": true,

		/* Codelyzer: Style */

		"component-class-suffix": true,
		"component-selector": [ true, "element", "bsm", "kebab-case" ],
		"directive-class-suffix": true,
		"directive-selector": [ true, "attribute", "bsm", "camelCase" ],
		"import-destructuring-spacing": true,
		"no-host-metadata-property": true,
		"no-inputs-metadata-property": true,
		"no-outputs-metadata-property": true,
		"no-queries-metadata-property": true,
		"pipe-prefix": false,
		"prefer-inline-decorator": false
	},
	"rulesDirectory": [
		"codelyzer"
	]
}

To Reproduce

1- Set the template-click-events-have-key-events rule to true in tslint.json.
2- Add an element with both a click event handler and a modified key event handler, like
<button (click)="handle()" (keydown.enter)="handle()"></button>

Expected behavior

The rule shouldn't detect the lack of a generic key event handlers as a violation, and should consider them as satisfactory.

Code

<button (click)="handle()" (keydown.enter)="handle()"></button>

Environment

• Version: 5.1.0
• OS: Windows 10
• Node.js version: 10.16.3
• Npm version: 6.9.0
• Angular (core) version: 8.2.4
• Angular CLI version: 8.3.2
• tslint version: 5.19.0

[rafaelss95]

@patricio-ezequiel-hondagneu-roig can you confirm that it's still an issue? I wasn't able to reproduce it with the latest version.

[larsvanpoucke]

@rafaelss95 I can confirm :)