Duplicate data attributes of input

I’m having problems with the component due to the hidden input created has the data-attributes of the original input copied. I mean, having:

<input type='text' id='x' name='x' data-role="x" class='form-control'/>

So I configure the typeahead for the object $(‘#x’). Once created I find:

<input type='text' id='x' name='x' data-role="x" class='form-control tt-input' />
<input type='text' data-role="x" class='form-control tt-hint'/>

The problem is that, after I use $(‘[data-role=x]’).val() and I expect only 1 result but I got 2 instead.

I would like that the created input for the component doesn’t copy the data- attributes as doesn’t copy name or id. Thanks a lot.

[erkurita]

The biggest issue with this problem is React.js. Since React assigns data-react-id attributes to most elements (if not all), when the typeahead is initialized it creates 2 inputs with the same data-react-id and React goes bonkers.

Perhaps we could have a setting with which turn on or off this behaviour?

[benedict-w]

I’m also getting Google Web Console crawler errors for duplicate itemprop=“query-input” field on site search box