最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React-Select input contents disappear when select is not focused - Stack Overflow

programmeradmin3浏览0评论

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

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:

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.

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 acplish 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)

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

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.

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 acplish 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)
Share Improve this question edited Feb 6, 2018 at 20:08 Matt Holland asked Feb 6, 2018 at 18:48 Matt HollandMatt Holland 2,2103 gold badges23 silver badges26 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

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

Below solution works for react-select v2.

Docs - https://react-select./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

you need to handle onChange event and also make selectedItems part of your ponent 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)

  1. 暂无评论