htmlFor Select

[halocline]

Please describe what the rule should do:

Grommet's Select component appends an "__input" to the input's id. This is not obvious to developers and causes form field labels to reference the input incorrectly.

What category of rule is this? (place an "X" next to just one item)

[x] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule will warn about:

Incorrect:

<FormField
        htmlFor="region"
        name="region"
        label="Region"
        help="Available regions are dependent on selected instance type(s)"
        required
      >
        <Select id="region" name="region" options={regionOptions} />
      </FormField>

Correct:

<FormField
        htmlFor="region__input"
        name="region"
        label="Region"
        help="Available regions are dependent on selected instance type(s)"
        required
      >
        <Select id="region" name="region" options={regionOptions} />
      </FormField>

Why should this rule be included in eslint-plugin-grommet?

[ericsoderberghp]

Hmm... This feels we are asking the caller to understand something about Select that should be opaque to them. I'd like to discuss this a bit more.