Uploaded image for project: 'SonarHTML'
  1. SonarHTML
  2. SONARHTML-93

FP on S1082 when using Angular's event bindings

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 3.1
    • Component/s: Parsing
    • Labels:
      None

      Description

      Angular enables developers to register on HTML tags' events using a specific syntax called Event binding:

      <a (click)="onClickEvent()">ClickMe</a>
      <a on-click="onClickEvent()">ClickMe</a>
      

      Rule RSPEC-1082 does not support these syntaxes and raise false positives.

      The following example demonstrates this behavior:

      <!DOCTYPE html>
      <html>
      <head>
          <title>Test</title>
      </head>
      <body>
      
          <!-- Angular 2+ -->
          <a onClick="doSomething();" (keypress)="doSomething();"></a> <!-- Compliant -->
          <a onMouseover="doSomething();" (focus)="doSomething();"></a> <!-- Compliant -->
          <a onMouseout="doSomething();" (blur)="doSomething();"></a> <!-- Compliant -->
          <a (click)="doSomething();" (keypress)="doSomething();"></a> <!-- Compliant -->
          <a (mouseover)="doSomething();" (focus)="doSomething();"></a> <!-- Compliant -->
          <a (mouseout)="doSomething();" (blur)="doSomething();"></a> <!-- Compliant -->
          <a (click)="doSomething();"></a> <!-- Non Compliant -->
          <a (mouseover)="doSomething();"></a> <!-- Non Compliant -->
          <a (mouseout)="doSomething();"></a> <!-- Non Compliant -->
      
          <a onClick="doSomething();" on-keypress="doSomething();"></a> <!-- Compliant -->
          <a onMouseover="doSomething();" on-focus="doSomething();"></a> <!-- Compliant -->
          <a onMouseout="doSomething();" on-blur="doSomething();"></a> <!-- Compliant -->
          <a on-click="doSomething();" on-keypress="doSomething();"></a> <!-- Compliant -->
          <a on-mouseover="doSomething();" on-focus="doSomething();"></a> <!-- Compliant -->
          <a on-mouseout="doSomething();" on-blur="doSomething();"></a> <!-- Compliant -->
          <a on-click="doSomething();"></a> <!-- Non Compliant -->
          <a on-mouseover="doSomething();"></a> <!-- Non Compliant -->
          <a on-mouseout="doSomething();"></a> <!-- Non Compliant -->
      
          <!-- Angular 1 -->
          <a onClick="doSomething();" ng-keypress="doSomething();"></a> <!-- Compliant -->
          <a onMouseover="doSomething();" ng-focus="doSomething();"></a> <!-- Compliant -->
          <a onMouseout="doSomething();" ng-blur="doSomething();"></a> <!-- Compliant -->
          <a ng-click="doSomething();" ng-keypress="doSomething();"></a> <!-- Compliant -->
          <a ng-mouseover="doSomething();" ng-focus="doSomething();"></a> <!-- Compliant -->
          <a ng-mouseleave="doSomething();" ng-blur="doSomething();"></a> <!-- Compliant -->
          <a ng-click="doSomething();"></a> <!-- Non Compliant -->
          <a ng-mouseover="doSomething();"></a> <!-- Non Compliant -->
          <a ng-mouseleave="doSomething();"></a> <!-- Non Compliant -->
      </body>
      </html>
      

      Note that using event binding with custom events is out of scope for now:

      <div (myClick)="clickMessage=$event" clickable>ClickMe</div>
      

        Attachments

          Activity

            People

            Assignee:
            christophe.zurn Christophe Zurn
            Reporter:
            nicolas.harraudeau Nicolas Harraudeau (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Due:
              Created:
              Updated:
              Resolved: