Prevent click into {{input}} component from propagating/bubbling up (ember)

Question

I have an {{input}} inside of an element that itself has an action.
How do I prevent clicking into the input from triggering the click event on the parent element?

1. I have tried bubbles=false.
2. I have also tried extending {{input}} and in the extended input I caught the click event and called event.preventDefault()

Please try my test case: https://ember-twiddle.com/a2cee9abd63a7400124e2745a7820cf8?numColumns=2&openFiles=controllers.application.js%2Ctemplates.application.hbs

Example hbs:

<div {{action "alert"}}>
  I don't want the click into the input to trigger the div's onlick. Help!<br/>
  {{input bubbles=false}}
</div>

Answer 1

Define component say my-input which extends Ember.TextField and define click function and return false to prevent bubbling.

import Ember from 'ember';
export default Ember.TextField.extend({
  click(){
    console.log('click my input');
    return false;
  }
});

For my-input component, you dont need to define anything to handle click event while including the component. you can just say {{my-input }}

Here is the working twiddle