Setting the id of an Ember component and handling click events

I am trying to implement a simple Ember component that has a dynamic id attribute and handles click events, but I'm having trouble doing both. If I set the id property, the click event doesn't fire; if I remove the dynamic id then click does fire.

I am setting the id as an attribute binding and I have a few other class name bindings.

Am I overwriting some Ember functionality by trying to set the id attribute of component? If so, how would you set a dynamic id attribute of the component?

Here's my component.js:

import Ember from 'ember';

export default Ember.Component.extend({
  active: false,
  elemId: "none",
  type: "none",
  click: function() {
    console.log("Clicked!!");
    return true;
  },

  tagName: 'span',
  classNames: ['annotation'],
  attributeBindings: ['id'],
  classNameBindings: ['typeClass', 'activeClass'],
  activeClass: function() {
    return this.get('active') ? `annotation-${this.get('type')}-active` : '';
  }.property('active'),
  typeClass: function() {
    return `annotation-${this.get('type')}`;
  }.property(),
  id: function() {
    return this.get('elemId');
  }.property()
});

I am currently using Ember v2.2.0.