input onClick doesn't work when input is inside DropdownButton or ButtonToolbar about react-bootstrap HOT 9 CLOSED

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

from react-bootstrap.

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} />.

from react-bootstrap.

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 [email protected] 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:

from react-bootstrap.

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

from react-bootstrap.

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.

from react-bootstrap.

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.

from react-bootstrap.

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

from react-bootstrap.

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

from react-bootstrap.

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.

from react-bootstrap.