input onClick doesn't work when input is inside DropdownButton or ButtonToolbar

[andjarnic]

I am showing a login form with username and password input boxes when a user clicks on a Login button in a DropdownButton which is in a ButtonToolbar. I added onClick to put in a handler to prevent default and stop propagation because currently clicking on the input box causes the menu to close, so I can't type into user input boxes.

Company

              <ul className="nav navbar-nav">
                <li><Link href='/'>Home</Link></li>
                <li><Link href='/register'>Register</Link></li>
              </ul>

              <ul className="nav navbar-nav navbar-right">
                <li>
                    <ButtonToolbar>
                        <DropdownButton bsStyle='default' bsSize='large' title='Login'>
                            <form id="loginForm" accept-charset="UTF-8">
                                <input id="login_username" style={inputStyle} onClick={this.inputClick} type="text" name="username" placeholder="Username" size="30" />
                                <input id="login_password" style={inputStyle} onClick={this.inputClick} type="password" name="password" placeholder="Password" size="30" />
                                <button type="button" className="btn btn-primary" onClick={this.login} style={inputStyle}>Login</button>
                            </form>
                        </DropdownButton>
                    </ButtonToolbar>
                </li>
              </ul>
            </div>
          </nav>

[stevoland]

Hmm, I think this is the same behaviour as the Bootstrap component. I'm not sure we should change it. I think your workaround is reasonable.

You could just add one handler to the form like: <form onClick={this.killClick} />.

[andjarnic]

Yes.. it is.. the way they handle it is a jquery hack to be honest. The problem I am facing is adding onClick to the is being ignored. When I click on the input box that shows up in the drop down, nothing happens. onFocus works though... but it doesn't prevent the pop-down menu from disappearing as soon as I click on the input box. I'll try putting it on the form element, see if that helps.

On Tuesday, April 8, 2014 7:18 AM, Stephen J. Collings notifications@github.com wrote:

Hmm, I think this is the same behaviour as the Bootstrap component. I'm not sure we should change it. I think your workaround is reasonable.
You could just add one handle to the form like:

.
—
Reply to this email directly or view it on GitHub.

[stevoland]

Ah, ok, I think I misunderstood. I'll look into this.

[stevoland]

Sorry, just got round to looking at this. So at the moment it's expected that children are MenuItems. If you wrap your form in a MenuItem the handler will fire but you'll have an unwanted anchor in your markup that you could work around with CSS.

I think we should support your use case by rendering a div instead of a ul if the children aren't MenuItems.

[hedgerh]

I looked into this issue, and was unable to reproduce. It appears that the click behavior of the DropdownButton component was addressed in #86.

            <ul className="nav navbar-nav navbar-right">
              <li>
                <ButtonToolbar>
                    <DropdownButton bsStyle='default' bsSize='large' title='Login' onClick={ this.handleClick }>
                        <form id="loginForm" accept-charset="UTF-8">
                            <input id="login_username" style={inputStyle} onClick={this.inputClick} type="text" name="username" placeholder="Username" size="30" />
                            <input id="login_password" style={inputStyle} onClick={this.inputClick} type="password" name="password" placeholder="Password" size="30" />
                            <button type="button" className="btn btn-primary" onClick={this.login} style={inputStyle}>Login</button>
                        </form>
                    </DropdownButton>
                </ButtonToolbar>
              </li>
            </ul>

with click handlers:

  handleClick(e) {
    console.log('handleClick');
  };

  inputClick(e) {
    e.stopPropagation();
  };

The input click handler was triggered, and the event did not propagate up to the DropdownButton.

[taion]

@hedgerh Thank you! Closing this issue for now, then, especially with the dropdown rework.

[rulyotano]

Why is this is closed?? I still getting the same issue/error!

[jquense]

@rulyotano because inputs aren't supported in dropdown menus. The current API though does allow you make a custom menu that does support it

[rulyotano]

Ok, so the solution is creating your own drop down, and handle a lot of things that custom drop down doesn't, like closing on click out. What is the reason why inputs are not supported! Thanks for answering.