Menu icon Foundation
Search Form in data-dropdown-menu will not submit on Enter

I have a search form my main navigation menu that has dropdown menus and a search form. The search form will not submit when enter is pressed; it seems to be suppressed by the data-dropdown-menu attribute. The search form works fine if I move it out of the li or remove that class (but that breaks the menu obviously)
I should mention the form still works when you manually click the submit button.

Does anyone know an easy way to get this form working (with enter)?
Let me know if I can provide anymore info.

formsMenusdropdownkeybindingfoundation 6

I have a search form my main navigation menu that has dropdown menus and a search form. The search form will not submit when enter is pressed; it seems to be suppressed by the data-dropdown-menu attribute. The search form works fine if I move it out of the li or remove that class (but that breaks the menu obviously)
I should mention the form still works when you manually click the submit button.

Does anyone know an easy way to get this form working (with enter)?
Let me know if I can provide anymore info.

Rafi Benkual almost 4 years ago

Hmm, that's weird. Looking at the JS, I don't see a preventDefault on the dropdown. D0 you have an example we can look at to help more?

You can use this:
http://codepen.io/rafibomb/pen/ZQEGog

George S almost 4 years ago

Sure, thanks for getting that codepen started :)

Here's the updated fork with the search form:
http://codepen.io/gpspake/pen/qbPmNp

The search form outside of the menu submits on enter but the one in the menu doesn't.

Brian Tan almost 4 years ago

That is because for Dropdown Menu, ENTER key is used for opening of menu item.

You can change keyboard mapping after initialzation:

  $(document).foundation();
  Foundation.Keyboard.register('DropdownMenu',{
//    'ENTER': 'open',
    'SPACE': 'open',
    'ARROW_RIGHT': 'next',
    'ARROW_UP': 'up',
    'ARROW_DOWN': 'down',
    'ARROW_LEFT': 'previous',
    'ESCAPE': 'close'
  });

In this case, only the ENTER mapping is removed, others remain in effect. Change as desired.

George S almost 4 years ago

Thanks Brian; that did the trick!