react-selectize createFromSearch showing additional overlay

Question

I am using react-selectize component for customizable dropdown which allows users to add new options.

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

My createFromSearch and onValueChange functions are as below;

   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
   },

Everything works fine other than this small UI issue. It shows duplicate options soon after I click .

When I click anywhere in the screen it removes this duplicate layover and showing properly. Can anyone please suggest is it styling issue or any other thing I need to do?

Answer 1

I able to fix this issue by trying several things. I was overriding onValueChange method of the component and passed only the value to the actual onValueChange method as below;

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

This cause the above styling issue since component couldn't find out item.newOption attribute. So solution is when adding newly created item for the option list add it as item.newOption = 'true' and pass the whole item object to onValueChange method.