ng-select同时设置id与labelForId后点击label无法跳转问题

问题表现 #

• 为 ng-select 同时配置 id 属性和 labelForId 属性时，点击关联的 label 标签无法正常跳转聚焦到组件上
• 不为 ng-select 设置 id 属性时，label 跳转功能可正常使用，但 IntelliJ IDE 会抛出「无效id引用」的报错

复现代码 #

<div class="row margin-top-25">
    <div class="col-4">
        <label for="one">One (正常运行 😊 但IDE会报红)</label>
    </div>
    <div class="col-8">
        <ng-select
                labelForId="one">
            <ng-option>Dog</ng-option>
            <ng-option>Cat</ng-option>
        </ng-select>
    </div>
</div>

<div class="row margin-top-25">
    <div class="col-4">
        <label for="two">Two (无法正常运行 ☹️)</label>
    </div>
    <div class="col-8">
        <ng-select
                id="two"
                labelForId="two">
            <ng-option>Dog</ng-option>
            <ng-option>Cat</ng-option>
        </ng-select>
    </div>
</div>

问题原因 #

ng-select 组件的 labelForId 属性是为内部真实可聚焦的 input 元素设置 id 所用，若同时给 ng-select 根组件设置了相同值的 id 属性，页面会出现两个重复 id 的元素，label 的 for 属性只会匹配到第一个元素（即 ng-select 根节点，本身不可聚焦），因此点击 label 无法触发聚焦。

解决方案 #

按如下规则配置即可同时满足 label 聚焦功能正常、IDE 无无效引用报错：

1. 不要让 ng-select 的 id 属性值和 labelForId/inputId 属性值重复
2. label 的 for 属性值与 labelForId/inputId 的值保持一致即可

正确配置示例 #

<div class="row margin-top-25">
    <div class="col-4">
        <label for="two-input">Two (正常运行 ✅ IDE无报错)</label>
    </div>
    <div class="col-8">
        <ng-select
                id="two"
                inputId="two-input">
            <ng-option>Dog</ng-option>
            <ng-option>Cat</ng-option>
        </ng-select>
    </div>
</div>

内容的提问来源于stack exchange，提问作者ruese