Component doesn't use template

Question

I want to extend Ember's textarea component. Therefore I created a file drop-files-textarea.js in app/components with this content:

import Ember from 'ember';

export default Ember.TextArea.extend({

// here comes the new behaviour
})

Now I'd like to add something to it's template. Therefore I created a file called drop-files-textarea.js in app/templates/components with this content:

{{yield}}
<p>added text</p>

This template is never used though. The Ember Inspector shows me that it uses the inline-template.

What am I doing wrong?

Answer 1

The template is used, but you won't see anything since the TextArea component uses tagName: 'textarea' to wrap the component in a textarea html element, so you get:

<textarea>
  <p>added text</p>
  aaaa
</textarea>

You may want to create a new component using the textarea component inside or use the value property to set the content of the textarea depending on your use case.

You could also overwrite the tagName, but then you don't get a text area...

export default Ember.TextArea.extend({
  value: 'Content of the text area'
})