Menu icon Foundation
Input inside top bar doesn't allow spaces

I have search inputs throughout my app. Normally they work fine, however, I have one inside the top bar navigation that will not allow me to type a space. For example "hello world" it will just result in "helloworld"

Any ideas on what's causing this?

inputsearchnavigationFoundationsites

I have search inputs throughout my app. Normally they work fine, however, I have one inside the top bar navigation that will not allow me to type a space. For example "hello world" it will just result in "helloworld"

Any ideas on what's causing this?

Rafi Benkual almost 4 years ago

Not sure why the CSS would cause that. Do you have a code example to share for more help?

You can use these codepens:
F5 - http://codepen.io/rafibomb/pen/EqCdJ
F6 - http://codepen.io/rafibomb/pen/ZQEGog

David almost 4 years ago

Just add

<li><input type="search" /></li>

to your F6 top-bar menu and you'll see the issue straight away.

Github issue: https://github.com/zurb/foundation-sites/issues/8011

Rafi Benkual almost 4 years ago

Ok, I'm pasting it here so people can see it. http://codepen.io/rafibomb/pen/mVxaJY If anyone has suggestions, would love to hear it!

Wyeth Myers almost 4 years ago

Hi, don't know why you're getting this issue, seems to work fine at my end in the F6 top-bar.

See if the code helps.

http://codepen.io/wyeth/pen/wMmbgP

<div class="top-bar" id="main-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Foundation</li>
       </ul>
   </div>

  <div class="top-bar-right">
    <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    <li><input type="search"></li>
    </ul>
  </div>
</div>

Nathan almost 4 years ago

Commenting out these lines from foundation.dropdownMenu.js fixes the space issue:

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

Rafi Benkual almost 4 years ago

Hmm, @Nathan that is the accessibility keyboard stuff. @Wyeth Myers Your pen doesn't have the Foundation JS loaded. The JS is causing it.

Did anyone see this issue submitted on GitHub?