allow the user to press enter to set the value

modules/inline-editable/main/index.coffee

@@ -12,12 +12,6 @@ class InlineEditable extends hx.InlineMorphSection
     if value isnt options.enterValueText
       inputSel.value(value)
     inputSel.node().focus()
-    hx.select(content).select('.hx-confirm').on 'click', 'hx.inline-editable', =>
-      value = hx.select(content).select('.hx-name').value()
-      @textSelection.text(value || options.enterValueText)
-        .classed('hx-inline-editable-no-value', !value.length)
-      @emit('change', { cause: 'user', value: value })
-      this.hide()
 
   constructor: (@selector, opts) ->
     # MorphSection registers the component
@@ -34,9 +28,25 @@ class InlineEditable extends hx.InlineMorphSection
 
     @textSelection = selection.append('a').class('hx-morph-toggle').text(options.value || options.enterValueText)
 
+    input = hx.detached('input').class('hx-name').attr('placeholder', options.enterValueText)
+    confirm = hx.detached('button').class('hx-btn hx-positive hx-confirm').add(hx.detached('i').class('hx-icon hx-icon-check'))
+
+    setValue = =>
+      value = input.value()
+      @textSelection.text(value || options.enterValueText)
+        .classed('hx-inline-editable-no-value', !value.length)
+      @emit('change', { cause: 'user', value: value })
+      @hide()
+
+    confirm.on 'click', 'hx.inline-editable', setValue
+    input.on 'keydown', 'hx.inline-editable', (e) ->
+      if e.key is 'Enter' or e.keyCode is 13 or e.which is 13
+        setValue()
+
     selection.append('div').class('hx-morph-content hx-input-group')
-      .add hx.detached('input').class('hx-name').attr('placeholder', options.enterValueText)
-      .add hx.detached('button').class('hx-btn hx-positive hx-confirm').add(hx.detached('i').class('hx-icon hx-icon-check'))
+      .add input
+      .add confirm
+
 
     super(@selector, enterEditMode(options))
 

modules/inline-editable/test/spec.coffee

@@ -91,6 +91,52 @@ describe 'inline-editable', ->
     testHelpers.fakeNodeEvent(container.select('.hx-confirm').node())()
     container.text().should.equal('Enter Value')
 
+  it 'should set the value when enter is pressed', ->
+    container = fixture.append('div')
+    ie = new hx.InlineEditable(container.node())
+    spy = chai.spy()
+    ie.on 'change', spy
+    input = container.select('.hx-name')
+    testHelpers.fakeNodeEvent(container.select('.hx-morph-toggle').node())()
+    input.value('bob')
+    testHelpers.fakeNodeEvent(input.node(), 'keydown')({ key: 'Enter' })
+    spy.should.have.been.called.with({
+      cause: 'user',
+      value: 'bob'
+    })
+
+  it 'should support deprecated event values', ->
+    container = fixture.append('div')
+    ie = new hx.InlineEditable(container.node())
+    spy = chai.spy()
+    ie.on 'change', spy
+    input = container.select('.hx-name')
+    testHelpers.fakeNodeEvent(container.select('.hx-morph-toggle').node())()
+    input.value('bob')
+    testHelpers.fakeNodeEvent(input.node(), 'keydown')({ keyCode: 13 })
+    spy.should.have.been.called.with({
+      cause: 'user',
+      value: 'bob'
+    })
+    testHelpers.fakeNodeEvent(container.select('.hx-morph-toggle').node())()
+    input.value('steve')
+    testHelpers.fakeNodeEvent(input.node(), 'keydown')({ which: 13 })
+    spy.should.have.been.called.with({
+      cause: 'user',
+      value: 'steve'
+    })
+
+  it 'should allow the user to enter text', ->
+    container = fixture.append('div')
+    ie = new hx.InlineEditable(container.node())
+    spy = chai.spy()
+    ie.on 'change', spy
+    input = container.select('.hx-name')
+    testHelpers.fakeNodeEvent(container.select('.hx-morph-toggle').node())()
+    input.value('bob')
+    testHelpers.fakeNodeEvent(input.node(), 'keydown')({})
+    spy.should.not.have.been.called()
+
   it 'should show the enterValueText when the value is cleared', ->
     container = fixture.append('div').text('test')
     ie = new hx.InlineEditable(container.node(), {