Problème d'espace input foundation

Bonjour,

Dans le cadre d'un projet dans lequelle j'utilise Foundation 6.2, j'aimerais faire une barre de recherche comme sur ce site dans mon menu. Mon menu contient des dropdowns :

<ul class="dropdown menu menu-centrer" data-dropdown-menu>
                                <li>
                                    <form id="search" action="#">
                                        <a href="#"><i class="fi-magnifying-glass"></i></a>
                                        <input placeholder="Rechercher">
                                    </form>
                                </li>
                                <li>
                                    <a href="#">Semestre</a>
                                    <ul class="menu ">
                                        <li><a href="#">Semestre 1</a></li>
                                        <li><a href="#">Semestre 2</a></li>
                                        <li><a href="#">Semestre 3</a></li>
                                        <li><a href="#">Semestre 4</a></li>
                                    </ul>
                                </li>
                                <li>|</li>
                                <li>
                                    <a href="#">Auteur</a>
                                    <ul class="menu">
                                        <li><a href="#">John Doe</a></li>
                                        <li><a href="#">Jeanne Doe</a></li>
                                    </ul>
                                </li>
                                <li>|</li>
                                <li>
                                    <a href="#">Matière</a>
                                    <ul class="menu">
                                        <li><a href="#">M4101</a></li>
                                        <li><a href="#">M4102</a></li>
                                        <li><a href="#">M4103</a></li>
                                        <li><a href="#">M4104</a></li>
                                        <li><a href="#">M4105</a></li>
                                        <li><a href="#">M4106</a></li>
                                        <li><a href="#">M4107</a></li>
                                    </ul>
                                </li>
                            </ul>

Jusque la rien de spécial.

Seulement !
Les espaces ne sont pas pris en compte dans mon input.
C'est à dire que si je veux écrire : “Bonjour le forum :) !”, ça va me donner : “Bonjourleforum:)!”.

Après quelques recherche j'ai trouvé que ça venait du foundation.js.
Seulement je ne sais absolument pas comment m'y prendre pour détourner la règle.
Il semblerait que le foundation.js prendrait les espace pour faire autre chose dans les menu dropdowns.

Serait-il possible qu'on m'aide la dessus ?
Merci d'avance de vos réponse.