Requesting help with ember-bootstrap inside a child component

Questions
1

Howdy! :wave: This is kind of a follow-up to an earlier post of mine.

I have a child component that needs to trigger an action on its parent component. I was able to figure this out when using ember-power-select in my child component. I’m having difficulty with the addition of an entry field from ember-bootstrap.

Trying to adhere to DDAU, I’m using the value attribute of the ember-bootstrap form element. This requires me to implement an onChange handler. Ok, so far so good. However, and I should have realized this, the handler is called for each change in the field. Not ideal because I need to be able to have my users enter a numeric value and then tab out, or press enter, to cause the change to be applied up stream.

This is what I have now, and it’s not working:

{{#form.element
  controlType="number"
  controlSize="1"
  value=amount
  onChange=(action (mut amount))
  as |el|
}}
  {{el.control
    class="form-control form-control-sm"
    onBlur=(action 'amountChanged')
  }}
{{/form.element}}

NOTE: I wish to trigger the parent event handler in amountChanged.

Any assistance will be greatly appreciated.

2

Here’s the solution that worked for me:

{{#form.element invisibleLabel="Value Amount"
  controlType="number"
  size="sm"
  value=amount
  onChange=(action (mut amount))
  as |el|
}}
  {{el.control
    focusOut=(action "amountChanged" amount)
    keyPress=(action "amountChanged" amount)
  }}
{{/form.element}}

I received the clues from a GitHub issue response.