Custom web components being flagged for invalid attributes

As an example the rule “DOM elements should use the “autocomplete” attribute correctly” (Web:S6840) is being triggered for custom html tags incorrectly.

We have our own custom html tag ‘xx-input’ that generates a compliant input tag, we are utilising an attribute autocomplete which is used to as part of the creation of our input control. Sonar is detecting this and thinks it shouldn’t be on our tag.

We think Sonar should either allow us to extend the rule to include our own tags or not detect custom tags.

Any thoughts? Or is there a way to do this already?

Hi Richy,

could you pls provide a code snippet reproducing the issue? What is your component doing?

Best,

Tibor

Hey there, thanks for responding. it’s quite simple…!

<mycustomtag-input id="txtUsername" autofocus autocomplete="username webauthn" placeholder="Enter your username" label="Username/Email Address"></mycustomtag-input>

And we get the attached message. Triggering the rule: Web:S6840

DOM elements should use the “autocomplete” attribute correctly

The component is then client side, using our framework, converted into a proper input tag and also creates an associated label making it fully compliant. But the problem is that Sonar is seeing the attribute autocomplete and thinks this should only be applied to an <input> tag. We are suggesting to either allow us to add our custom tag <mycustomtag-input> to the allowed DOM elements or for all custom tags to be ignored - this should be feasible as customer tags must have a hyphen.

Hope that makes sense.

1 Like

@RichyAplinClements , thanks for the report. You are correct, the rule should not trigger for custom components - and more generally it should trigger only for tags that are part of the HTML standard.

I opened a ticket to track the fix.

Regard,

Eric.

Super news. thanks for this

1 Like