javascript - Spacebar key not working in this particular input field -

hi have these tabs created jquery ui , have script if double click on title of tab, allow change name of tab.

everything works including changing of tab names..etc. input field lets me change tab name not allow spacebar work? have never encounter before , coming here help.

here snippet of code triggers double click change title.

html:

<li class="tab"><a href="#tab-1" title="cool">cool</a><span class="hide edit-field"><input type="text" value="cool" name="tab_title[]" placeholder="enter title" /><button name="edit" type="submit">done</button></span></li> 

js:

$( '.tab' ).on( 'dblclick', 'a', function() {   $( ).hide();   $( ).siblings( '.edit-field' ).show(); } );  $( 'button[name="edit"]' ).click( function() {    // stuff here. } ); 

so stated works somehow spacebar got disabled...??

thanks jason sperske, here fiddle illustrates issue.

http://jsfiddle.net/yhxgd/1/

thanks looking.

i think problem comes this line of source in jquery ui:

case $.ui.keycode.space:   // activate only, no collapsing   event.preventdefault();   cleartimeout( this.activating );   this._activate( selectedindex );   return; 

in short, jquery ui intentionally preventing space bar preforming action (in attempt give tabs more tab behavior , behave less links). fix, attempt disable when enter tab edit mode, think might give unintended behavior.