Ember.js: Cannot use input component with component helper

Created on 17 Mar 2016 · 3Comments · Source: emberjs/ember.js

Trying to use the input component with the component helper, like as this:
passedComponent=(component 'input' type="number" value=myValue)

will result in an assertion failure like this:
Uncaught Error: Assertion Failed: You cannot use 'input' as a component name. Component names must contain a hyphen

Source

stevesims

Most helpful comment

the implication therefore is that the input component needs to get renamed - which obviously is impractical - or alternatively a standard hyphenated wrapper should be available

not being able to use a standard (inbuilt) component with the component helper seems like a rather odd and arbitrary restriction

stevesims on 17 Mar 2016

👍4

All 3 comments

@stevesims this is correct. Creating a closure component with input is not currently possible. The justification is somewhat tied to Glimmer Components, we want to reserve the name input for those.

Going to close this for now as it is not a bug, but we can re-open and continue discussion.

mixonic on 17 Mar 2016

the implication therefore is that the input component needs to get renamed - which obviously is impractical - or alternatively a standard hyphenated wrapper should be available

not being able to use a standard (inbuilt) component with the component helper seems like a rather odd and arbitrary restriction

stevesims on 17 Mar 2016

👍4

{{#if requiresComponentSubstitution}}  

      <!-- requiresComponentSubstitution: is not "input" -->

        {{component inputComponentName
                    id=(concat elementId '-control')
                    class='form-control'
                    type=type
                    name=valuePath
                    placeholder=placeholder
                    value=value
                    input=(action 'onInput')
        }}
    {{else}}
        {{input id=(concat elementId '-control')
                class='form-control'
                type=type
                name=valuePath
                placeholder=placeholder
                value=value
                input=(action 'onInput')
        }}
    {{/if}}

I'm both offering this as a helpful workaround, and subtly suggesting that it's a drawback of using Ember. It would be fantastic if it "just worked" :)