2017-07-17 6 views
0

react-select libraryからSelectコンポーネントを最新バージョン(1.0.0-rc.5)で実装しました。React-Select 1.0.0-rc.5 - オプションを選択して内部をクリックしても選択が開かない

私は選択要素をクリックしてリストを開くことができます。値を選択すると、リストが閉じられ、選択した値が表示されます。ただし、オプションを再度表示するために要素をクリックすると、何も起こりません。クリックしただけでリストを開くことができます(おそらく、ぼかしイベントの後)。

は私がautoBlur = {本当}小道具を使用してこの問題を回避作業しようとしたが、私のことができ、私はこれが起こらないという通知をしたIE 11のページの次の要素

にタブ移動できませんまだバージョン0.9.1を使用しているデモページにあります。

これはなぜ起こっているのですか?

EDITは

これはこれは

const TestPage =() =>{ 

    return(
     <TestSelect 
      id="select-id" 
      options={testSelectOptions} 
    />); 

} 

export const testSelectOptions = [ 
    { value: '1', label: 'Option 1' }, 
    { value: '2', label: 'Option 2' }, 
    { value: '3', label: 'Option 3' } 
]; 

export default TestPage; 
+0

コード例を提供できますか? – Fabien

+0

申し訳ありませんが、コードスニペットを含めるように私の応答を編集しました。 –

答えて

0

が、私はそれを考え出したクラスを実装するページである私のクラス

export class TestSelect extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    updateValue = (selectedItem) => { 
     this.setState({ selectValue: selectedItem }); 

     if (this.props.onChange) { 
      this.props.onChange(selectedItem); 
     } 
    } 

    render() { 
     return (
      <div id={this.props.id} className="form-styling"> 
       <Label text="React Select" /> 

       <br/><br /> 

       <Select 
        options={this.props.options} 
        className="select-class" 
        clearable={false} 
        onChange={this.updateValue} 
       /> 
      </div> 
     ); 
    } 
} 

のサンプルです。オプションの選択時に、入力の最小幅が95%に設定されていました。

これにより、ドロップダウン内をクリックしようとするとevent.target.tagNameがINPUTになり、フォーカスイベントが発生する前にコードが返されます。

関連する問題