Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Hitting return in a text input causes the first select element to display its options #145

Closed
mikespainhower opened this Issue · 7 comments

3 participants

@mikespainhower

Normally when a text input element has the focus and the user hits return, the form submits.

When Flat-UI elements are inside a form tag, and the user hits return inside a text input, the first select element opens to display its options. The form doesn't submit.

Adding the following HTML to http://designmodo.github.io/Flat-UI/components.html illustrates the issue:

<div class="container">
  <form method="get" action="#">
    <select name="info" class="mbn">
      <optgroup label="Profile">
        <option value="0">My Profile</option>
        <option value="1">My Friends</option>
      </optgroup>
      <optgroup label="System">
        <option value="2">Messages</option>
        <option value="3">My Settings</option>
        <option value="4" class="highlighted">Logout</option>
      </optgroup>
    </select>
    <input type="text" value="" placeholder="Enter something" class="form-control" />
    <input type="submit" value="go" class="form-control" />
  </form>
</div>
@mikespainhower mikespainhower changed the title from After hitting return in any input[type="text'], form <select> opens to Hitting return in a text input causes the first select element to display its options
@alpcoder

Were you able to solve the Problem? I encounter the same issue.

@alpcoder

Thanks so much for reply!
I tried both code snippets (rewrote them to "text" of your instead of textarea) in the thread you provided - however no prevail. It still opens the select.
If I use a textarea it works.
Could you provide me with the code that works for you?

@mikespainhower
$.fn.pressEnter = function(func) {
    this.bind('keypress', function(e) {
        if(e.keyCode === 13) {
            func.apply(this, [e]);
        }
    });
    return this;
};

$('input[type="text"]').pressEnter(function(e) {
    e.preventDefault();
});
@alpcoder

Perfect, it works. Thank you so much. You fixed the crucial form of my Webapp my customers first interact with. :-)

@mikespainhower

Glad it worked out for you!

@andrew-ml
Collaborator

Hi everyone, the possible cause to that was select plugin,
we switched to select2.js starting from v1.3.0, please check it out.

@andrew-ml andrew-ml closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.