web-dev-qa-db-fra.com

React-Bootstrap Dropdown avec Input ne reste pas ouvert

J'utilise React-Bootstrap DropDown avec une Entrée dans un MenuItem (sinon la console me hurle Uncaught TypeError: Impossible de lire la propriété 'focus' of indéfinie )

OK, le menu déroulant s'affiche et l'entrée se trouve dans un élément de menu (tout va bien), sauflorsque je clique à l'intérieur de l'entrée, la liste déroulante se ferme.

Voici mon JSX

<Bootstrap.DropdownButton title={this.state.callIdTitle} id="callId">
  <Bootstrap.MenuItem eventKey='1'>
   <input ref="callIdInput" type='text' eventKey='2' placeholder='Enter Call ID' />
  </Bootstrap.MenuItem>
</Bootstrap.DropdownButton>

Tout point dans la bonne direction est très apprécié, j'ai essayé de résoudre ce problème toute la journée.

Je vous remercie.

javascriptjquerytwitter-bootstrapreactjsreact-bootstrap
15
user3196599

Après toute la journée ... c'est ce que j'ai proposé.

J'espère qu'il y a un meilleur moyen.

    <Bootstrap.DropdownButton onClick={this.setFocusToCallIdInput} title={this.state.callIdTitle}>
      <Bootstrap.MenuItem href="javascript:void(0);" eventKey='1'>
        <Bootstrap.Input onClick={this.dontCloseMeBro} ref="callIdInput" type='text' onChange={this.callIdInputSelected} placeholder='Enter Call ID' />
      </Bootstrap.MenuItem>
    </Bootstrap.DropdownButton>



setFocusToCallIdInput:function(e){
    console.log("Call Id clicked");     
    React.findDOMNode(this.refs.callIdInput).focus();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
},
dontCloseMeBro:function(e){
    console.log("menu item clicked");       
    React.findDOMNode(this.refs.callIdInput).focus();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
},
1
user3196599

J'ai réussi à le faire fonctionner en ayant un onToggle personnalisé pour la liste déroulante qui ne fait rien si click provient de l'élément input. En gros, j'ai fini avec quelque chose comme ça:

Donc, quelque chose comme ça:

var React = require('react');

var ReactBootstrap = require('react-bootstrap'),
    Dropdown = ReactBootstrap.Dropdown,
    DropdownToggle = Dropdown.Toggle,
    DropdownMenu = Dropdown.Menu,
    Input = ReactBootstrap.Input,
    MenuItem = ReactBootstrap.MenuItem;

module.exports = React.createClass({
  displayName: 'DropdownWithInput',

  setValue: function(e) {
    var value = e.target.value;

    this.setState({value: value});
  },

  onSelect: function(event, value) {
    this.setState({value: value});
  },

  inputWasClicked: function() {
    this._inputWasClicked = true;
  },

  onToggle: function(open) {
    if (this._inputWasClicked) {
      this._inputWasClicked = false;
      return;
    }
    this.setState({open: open});
  },

  render: function() {
    return (
        <Dropdown id={this.props.id} open={this.state.open} onToggle={this.onToggle}
                  className="btn-group-xs btn-group-default">
          <DropdownToggle bsStyle="default" bsSize="xs" className="dropdown-with-input dropdown-toggle">
            Dropdown with input
          </DropdownToggle>

          <DropdownMenu>
            <Input
                type="text"
                ref="inputElem"
                autoComplete="off"
                name={this.props.name}
                placeholder="Type something here"
                onSelect={this.inputWasClicked}
                onChange={this.setValue}
                />
            <MenuItem divider key={this.props.id + '-dropdown-input-divider'}/>
            <MenuItem eventKey={1} onSelect={this.onSelect}>One</MenuItem>
            <MenuItem eventKey={2} onSelect={this.onSelect}>Two</MenuItem>
            <MenuItem eventKey={3} onSelect={this.onSelect}>Three</MenuItem>
          </DropdownMenu>
        </Dropdown>
    );
  }

});

J'espère que cela fonctionne pour vous aussi.

8
kblcuk

Cette fonctionnalité est une fonctionnalité relativement nouvelle pour React-Bootstrap. Consultez les nouveaux documents de personnalisation de la liste déroulante: http://react-bootstrap.github.io/components.html#btn-dropdowns-custom Le dernier exemple de cette section inclut une liste déroulante avec une entrée. Le déclencheur déroulant ressemble à un lien, mais vous pouvez également le personnaliser.

3
Matt Smith

J'ai trouvé une solution à ce problème qui a très bien fonctionné pour moi. À l'intérieur du menu déroulant, j'avais une entrée de texte ( pas à l'intérieur d'un MenuItem).

<input onSelect={e => e.stopPropagation()} ... />
1
user1676699

Cela semble fonctionner pour moi.

<Dropdown id="my-dropdown">
  <Input 
    type="text"
    bsRole="toggle"
    value={this.state.inputValue}
    onChange={this.onChange} />
  <Dropdown.Menu>
    <MenuItem key={1}>Item 1</MenuItem>
    <MenuItem key={2}>Item 2</MenuItem>
    <MenuItem key={3}>Item 3</MenuItem>
  </Dropdown.Menu>
</Dropdown>
0
landerton