react-select creatable defaultInputValue not working

Question

I have created a CreatableSelect control and set the defaultInputValue property. Although the default value gets displayed on the control when control is loaded, after the first time I click on the control (either on the the textbox or the drop down symbol) the list does not display and on click again the default value is replaced by 'Select...' and then the list is displayed.

I would expect the default value not to be cleared when I click on the control unless I explicitly clear it. I would want the default value to remain until I make a selection in the dropdown or clear the value myself

import React, { Component } from 'react';


import CreatableSelect from 'react-select/creatable';

export default class CreatableSingle extends Component<*, State> {
  handleChange = (newValue: any, actionMeta: any) => {
    console.group('Value Changed');
    console.log(newValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };
  handleInputChange = (inputValue: any, actionMeta: any) => {
    console.group('Input Changed');
    console.log(inputValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };
  render() {
    return (
      <CreatableSelect
        isClearable
        defaultInputValue ={'Yellow'}
        onChange={this.handleChange}
        onInputChange={this.handleInputChange}
        options={ [
          { value: 'ocean', label: 'Ocean' },
          { value: 'blue', label: 'Blue' },
          { value: 'purple', label: 'Purple' },
          { value: 'red', label: 'Red' }]}
      />
    );
  }
}

The above code is from the https://react-select.com/home .. Have added below line since i would have a default value ( coming from database ) also the default value 'Yellow' is not part of the options array defaultInputValue ={'Yellow'}

Answer 1

It seems that defaultInputValue is used to set the initial value of the search input based on their readme.

I think for what you are trying to do you need defaultValue prop:

import React, { Component } from 'react';
import CreatableSelect from 'react-select/creatable';

export default class CreatableSingle extends Component<*, State> {
  handleChange = (newValue: any, actionMeta: any) => {
    console.group('Value Changed');
    console.log(newValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };

  handleInputChange = (inputValue: any, actionMeta: any) => {
    console.group('Input Changed');
    console.log(inputValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };

  render() {
    return (
      <CreatableSelect
        isClearable
        defaultValue={{ value: 'red', label: 'Red' }}
        onChange={this.handleChange}
        onInputChange={this.handleInputChange}
        options={ [
          { value: 'ocean', label: 'Ocean' },
          { value: 'blue', label: 'Blue' },
          { value: 'purple', label: 'Purple' },
          { value: 'red', label: 'Red' }]}
      />
    );
  }
}

Answer 2

This works for me:) types of searchTags and savedTags are not the same. You have to create them separately.