Example of built-in component uses dasherized event

[Benjy1979]

At https://guides.emberjs.com/v3.19.0/components/built-in-components/

there is as an example immediately under the "Actions" header:

First Name
<Input @value={{this.firstName}} @key-down={{this.updateFirstName}} id="firstname" />

But then later in the page:
{{!-- This does not work: uses dasherized event name --}}
<Input @type="checkbox" @key-down={{this.updateName}} id="firstname" />
{{!-- This does not work: uses actual event name --}}
<Input @type="checkbox" @keydown={{this.updateName}} id="firstname" />

[ijlee2]

Hi, @Benjy1979. Thanks for reporting this issue. Sorry if this was your first experience with Ember and the <Input> component didn't work as you expected.

To my understanding, we're currently unsure what causes the event arguments to not work sometimes. The issue's under investigation, albeit not actively:

• Input event names are incorrect #1254
• Input component does not accept documented event names emberjs/ember.js#18654

I'll look into the ember.js repository to better understand how the <Input> component works. I can bring up the issue at this week's Learning Team meeting too.

Since this issue is close to the two above, is it okay with you if I close this one?

[Benjy1979]

I think you possibly might have misunderstood the ticket? I wasn't really saying something does not work. I am pointing out an inconsistency on the guides page more than something being functionally broken. The guides on that page are explictly saying the dasherized event does not work, to help the user - which is correct. But further up the page an unrelated example has the dasherised version of the event in an example - buit as said later on - it won't work. If you understood this then just do whatever you want with regards to closing the ticket. From: Isaac Lee [mailto:[email protected]] Sent: 19 July 2020 19:24 To: ember-learn/guides-source <[email protected]> Cc: Ben Glancy <[email protected]>; Mention <[email protected]> Subject: Re: [ember-learn/guides-source] Example of built-in component uses dasherized event (#1485) Hi, @Benjy1979<https://github.com/Benjy1979>. Thanks for reporting this issue. Sorry if this was your first experience with Ember and the <Input> component didn't work as you expected. To my understanding, we're currently unsure what causing the event arguments to not work sometimes. The issue's under investigation, albeit not actively: * #1254<#1254> * emberjs/ember.js#18654<emberjs/ember.js#18654> I'll look into the ember.js repository<https://github.com/emberjs/ember.js/tree/v3.19.0/packages/%40ember/-internals/glimmer/lib/components> to better understand how the <Input> component works. I can bring up the issue at this week's Learning Team meeting too. Since this issue is close to the two above, is it okay with you if I close this one? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#1485 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABKOHRABBDO2EBGJ35K4UFLR4M22HANCNFSM4PBOARJQ>.

[ijlee2]

Yep, I misunderstood your original message. I looked at https://guides.emberjs.com/v3.19.0/components/built-in-components/ and believe you were referring to these 2 parts, is this correct?

Part 1:

Part 2:

I looked at the relevant code in ember.js repo. It seems to me that the confusion with event argument names is due to how <Input> internally uses two different components: a <Checkbox> component when we pass the argument @type="checkbox", and a <TextField> component in all other cases. I believe both components rely on mixins to allow event handling, which adds to further confusion.

In short, I think the Built-in Components section currently does show the right information: "For @type="checkbox", use camel-cased event names, but for all other cases, dasherized names are okay."

This Thursday, at the Learning Team meeting, let me double-check with the rest of the team:

• Is my conclusion above (in quotes) correct?
• How can we explain better what event argument names to pass when creating (1) a checkbox input, (2) a non-checkbox input, and (3) a textarea?

[Benjy1979]

Ok, I see I did miss that difference. Thanks for wanting to make it clearer From: Isaac Lee [mailto:[email protected]] Sent: 19 July 2020 21:33 To: ember-learn/guides-source <[email protected]> Cc: Ben Glancy <[email protected]>; Mention <[email protected]> Subject: Re: [ember-learn/guides-source] Example of built-in component uses dasherized event (#1485) Yep, I misunderstood your original message. I looked at https://guides.emberjs.com/v3.19.0/components/built-in-components/ and believe you were referring to these 2 parts, is this correct? Part 1: [Screen Shot 2020-07-19 at 3 14 18 PM]<https://user-images.githubusercontent.com/16869656/87884223-8df23f80-c9d2-11ea-9008-52959d33230f.png> Part 2: [Screen Shot 2020-07-19 at 3 06 45 PM]<https://user-images.githubusercontent.com/16869656/87884104-867e6680-c9d1-11ea-94d8-c8085f119a8a.png> I looked at the relevant code in ember.js repo. It seems to me that the confusion with event argument names is due to how <Input> internally uses two different components: a <Checkbox> component when we pass the argument @type="checkbox", and a <TextField> component in all other cases. I believe both components rely on mixins to allow event handling, which adds to further confusion. In short, I think the Built-in Components section currently does show the right information: "For @type="checkbox", use camel-cased event names, but for all other cases, dasherized names are okay." This Thursday, at the Learning Team meeting, let me double-check with the rest of the team: * Is my conclusion above (in quotes) correct? * How can we explain better what event argument names to pass when creating (1) a checkbox input, (2) a non-checkbox input, and (3) a textarea? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#1485 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABKOHRG6XTVHM52R44ITECTR4NJ6XANCNFSM4PBOARJQ>.

[ijlee2]

@Benjy1979 Hello! I want to give a status update.

Today at the Learning Team meeting, I brought up the user experience that you had with reading the Guides to learn event handling for a checkbox input. Everyone was on board with reorganizing the section to help explain event handling better.

https://github.com/emberjs/core-notes/pull/322/files#diff-1c6fe35708f8b2c2b915bde415dfce75R52

When I can find time this month, I can work on addressing and closing this issue. Would this be okay with you?

[Benjy1979]

Of course, thanks for giving it some attention.

[ijlee2]

Let me close this in favor of #1540.