额外输入标记显示在HTML中

Question

最近在尝试为我的webapp中的组件编写一些自动化测试时发现了一个问题，我正在使用Anglur作为前端，并且我正在尝试创建一个类型提前输入文本框

        <div class="row">
        <div class="col-md-4">
            <label ng-bind="::'ENVIRONMENT' | translate"></label>
        </div>
        <div class="col-md-8" ng-class="{ 'has-error' : iliCtl.noEnvResults && iliForm.envs.$viewValue !== '' }">
            <input name="envs" id="envs" type="text"
                ng-model="iliCtl.selectedEnv"
                uib-typeahead="env.name for env in iliCtl.environmentData | filter:{name:$viewValue} | limitTo:50"
                typeahead-no-results="iliCtl.noEnvResults"
                typeahead-show-hint="true" typeahead-min-length="0"
                typeahead-on-select="onEnvSelect($item)"
                placeholder="-- Select --" 
                class="form-control">
            <div class="error-class" ng-show="iliCtl.noEnvResults && iliForm.envs.$viewValue !== ''" ng-bind="::'ERROR_207' | translate"></div>
        </div>
    </div>

上面的代码工作正常，直到我检查元素，生成的HTML似乎生成两个输入标记，如下图所示。

有关为什么会发生这种情况的任何想法，因为您可以看到输入标记主要包含相同的属性，主要差异似乎是样式属性。但我不明白为什么会发生这种情况。

Answer 1

我找到了答案，并不是我第一次假设的错误。

输入标记属性typeahead-show-hint="true"负责在HTML中生成第二个输入框，用于在文本框中显示建议的项目。