React-Select input contents disappear when select is not focused

5
votes

I've been using react-select happily for a while, but am having a problem regarding the Creatable version of the component.

Here's my code:

const options = [
  {
    label: 'One',
    value: 'One'
  },
  {
    label: 'Two',
    value: 'Two'
  },
  {
    label: 'Three',
    value: 'Three'
  },
  {
    label: 'Four',
    value: 'Four'
  }
];

const selectedItems = [
  {
    label: 'One',
    value: 'One'
  }
];

const App = () => (
  <div style={styles}>
    <Select.Creatable
      backspaceRemoves={true}
      multi
      openOnFocus={false}
      openOnClick={false}
      onSelectResetsInput={false}
      onBlurResetsInput={false}
      onCloseResetsInput={false}
      arrowRenderer={() => null}
      clearRenderer={() => null}
      options={options}
      value={selectedItems} />
  </div>
);

I've also created a runnable version of this here: https://codesandbox.io/s/q27lnon96

As you can see if you access the Sandbox page, any text entered into the select disappears when the user clicks away. It re-appears if the select is given focus again.

Here's a GIF recording of the behaviour

To be explicit, my question is about the text "two" that is entered into the input - it's not an issue with the selected values (These work fine if the correct state and callbacks are configured).

How can I make react-select preserve the contents of the input? It seems like it is remembering the value internally, but hiding the text input when it no longer has focus. I thought that setting the various onFooResetsInput all to false would accomplish this, but it hasn't quite worked.

My application is using the value of the text entered into this input to affect other elements of the UI, so it appears out of sync when the text is hidden.

  • react-select version: 1.2.1 (Latest)
  • react and react-dom versions: 15 or 16 (both exhibit this behaviour)
2
javascriptreactjsreact-select

2 Answers

1
votes

you need to handle onChange event and also make selectedItems part of your component state. In you case selectedItems never change.

take a look at https://codesandbox.io/s/pyo17y6qv7

Edit

Yep it works with inputRenderer. The default argument of the function pass the value to the input (this is the reason why input value disappear because when it is onBlur it pass value '' to the input. Likely a bug on react-select because we have onBlurResetsInput flag false) so we need to remove it before we pass it to our own input. Updated code on https://codesandbox.io/s/54on0mr984

0
votes

For anyone still interested in solution for react-select version2.

Below solution works for react-select v2.

Docs - https://react-select.com/upgrade-guide#concepts

import React, { useState } from 'react'
import { default as ReactSelect } from "react-select";



function Select(props) {

    const [inputValue, setinputValue] = useState('')

    const onInputChange = (inputValue, event) => {
        if (event.action==='input-change'){
            setinputValue(inputValue)
        }  
    }
    
    return (
            <ReactSelect
                onInputChange={onInputChange}
                inputValue={inputValue}
            />
    )
}

export default Select