Not able to delete characters of cc card, expiration and security code of input field in firefox.

Working on a ember app. I have this form that takes in name, cc number, expiration and security number. I am able to backspace on name however I cant delete any of the other content, and this only happens in Firefox.

  <div class="form-group cc-name input-row {{if nameValid 'has-success'}}">
  <label class="label label--sm">Name on Card</label>
  {{input type="text" value=name class="form-control"}}
</div>

<div class="form-group cc-number input-row {{if numberValid 'has-success'}}">
  <label for="cc-number" class="label label--sm">Credit Card Number</label>
  {{input-credit-card-number number=number class="form-control"}}
  <div class="card-type {{if type 'show' 'hide'}}">
    {{#if type}}
      {{inline-svg type class="icon icon--credit-card"}}
    {{/if}}
  </div>

</div>

<div class="input-row input-row--inline">
  <div class="form-group cc-expiration input-col--50 {{if expirationValid 'has-success'}}">
    <label class="control-label label--sm">Expiration</label>
    {{input-credit-card-expiration month=month year=year class="form-control"}}
  </div>

  <div class="form-group cc-cvc input-col--50 {{if cvcValid 'has-success'}}">
    <label class="control-label label--sm">Security Code</label>
    {{input-credit-card-cvc cvc=cvc class="form-control"}}
  </div>
</div>