text: import Component from '@ember/component';
  
  export default Component.extend({
    classNames: ['input-edit'],
    classNameBindings: ['active'],
  
    //proxy clicks to input focus
    click() {
      this.$('input').focusin();
    },
  
    change() {
      this.send('valueChanged');
    },
  
    actions: {
      inputFocusIn() {
  
        //only if not already focused so subset of the value can still be selected manually
        if(!this.active){
          this.$('input').select().one('mouseup.selectValue',
            function (e) {
              e.preventDefault();
            }
          );
        }
  
        this.set('active', true);
      },
  
      inputFocusOut() {
        if(this.$('input').val()===''){
          this.$('input').val('New Twiddle');
        }
  
        this.set('active', false);
      },
  
      removeFocus() {
        this.$('input').blur();
      },
  
      valueChanged() {
        this.titleChanged();
      }
    }
  
  });
  