react-selectize createFromSearch追加のオーバーレイを表示

Question

私は、ユーザーが新しいオプションを追加できるカスタマイズ可能なドロップダウンに反応選択コンポーネントを使用しています。

  <Dropdown 
      options={myOptions} 
      value={selectedValue} 
      onValueChange={value => { 
        this.valueUpdated(emptyStringToNull(value)); 
      }} 
      createFromSearch={this.createFromSearch} 
     /> 

私のcreateFromSearchとonValueChangeの機能は以下のとおりです。

createFromSearch: function(options, search){   
    if (search.length === 0 || (options.map(function(option){ 
     return option.label; 
    })).indexOf(search) > -1) 
     return null; 
    else { 
     return {'label': search, 'value': search}; 
    } 
    }, 

    onValueChange: function(text) { 
    // update the value in state 
    }, 

この小さなUIの問題以外はすべて正常に動作します。クリックするとすぐに複製オプションが表示されます。

私はそれがこの重複乗り継ぎを削除し、適切に表示する画面の任意の場所をクリックします。誰もがそれをスタイリングの問題や私がする必要がある他のことはお勧めできますか？

Answer 1

いくつかのことを試してこの問題を解決できました。私は、コンポーネントのonValueChangeメソッドをオーバーライドし、実際のonValueChangeメソッドに値を次のように渡しました。

const onValueChangeInDropdown = props => value => { 
     if (value) { 
     props.onValueChange(value.value); 
     } else { 
     props.onValueChange(null); 
     } 
}; 

これは、コンポーネントがitem.newOption属性を検出できなかったため、上記のスタイリングの問題を引き起こします。だから解決策は、新しく作成されたアイテムをオプションリストに追加してitem.newOption = 'true'として追加し、itemオブジェクト全体をonValueChangeメソッドに渡すときです。