bug: lowercase for in htmlFor attribute doesn't work

[katiedeangelis]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

2.17.1

Current Behavior

In my render function, I created a checkbox:

<label htmlFor={this.id}>My Label Text</label>
<input type="checkbox" id={this.id}></input>

When the component renders, "htmlFor" becomes "htmlfor" and the "My Label Text" does not toggle the checkbox.

Expected Behavior

In my render function, when "htmlFor" is added to a checkbox, that is the attribute (with case) that should render. When the component renders, I also expect that when the "My Label Text" label is clicked, the checkbox is toggled.

Steps to Reproduce

1. Create a checkbox in a render function with the following label/input setup:

<label htmlFor={this.id}>My Label Text</label>
<input type="checkbox" id={this.id}></input>

2. When the component renders, click the label
3. Notice the checkbox does not toggle

Code Reproduction URL

Additional Information

I noticed in the stencil-public-runtime.ts file that there is an htmlfor element property on the LabelHTMLAttributes interface which is not correct:

   interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
        form?: string;
        htmlFor?: string;
        htmlfor?: string;
    }

[alicewriteswrongs]

Hi @katiedeangelis, thanks for filing this issue and for filing the related PR! I get the gist of what you're reporting here, but would you mind creating a simple reproduction repo that showcases this issue? Doing so will help us confirm what's going on and also evaluate your fix PR.

[katiedeangelis]

Hi Alice, thanks for reaching out. Unfortunately I ran across this bug will putting a Stencil POC together for use in our atomic design system where I work. We’ve decided not to move forward with Stencil, but thought I’d add and fix the bug while I was working on it. I don’t have time to spin up a new repo, so I understand if you decide not to move forward with the PR. Thanks!

On Jul 15, 2022, at 10:23 AM, Alice @.***> wrote:

 Hi @katiedeangelis, thanks for filing this issue and for filing the related PR! I get the gist of what you're reporting here, but would you mind creating a simple reproduction repo that showcases this issue? Doing so will help us confirm what's going on and also evaluate your fix PR.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[rwaskiewicz]

Relabeling for the team to take a closer look. Thanks!