React-select: Clear current value text on focus

[stinoga]

Is there a way to clear the current value text when focusing a select with searchable equal to true? Would like the input to empty when focused, and refill when blurred.

[Ricka7x]

I was wondering the same thing!

[stinoga]

Ping?

[KaihatsuOnline]

Same,
Users don't seem to notice the list is searchable as the field is not cleared onFocus.
The caret navigation is blinking but not very visible.
I tried the following, but did not work:

value={this.state.isFocused ? this.state.inputValue : selected_id}

[shreyass]

Stuck with the same issue. How did you guys fix it?

[Ericky14]

.Select.is-open .Select-value { display: none; }

[pondrejack]

^^ Setting display: none removes the placeholder as well

[captaincole]

Does anyone have a v2 solution to this?

i've tried something like this but with no result

    const selectStyleFn = {
      valueContainer : (base: any, state: any) => {
        return { display: 'none' }
      }, singleValue : (base: any, state: any) => {
        return { display: 'none' }
      },
    }
    return (
      <Async
        style={selectStyleFn}
        key={'omni-select-monad'}
        name='omni-select'
        value={this.state.searchValue}
        className={style.search}
        placeholder={'Search...'}
        menuContainerStyle={{ maxHeight: '402px' }}
        menuStyle={{ maxHeight: '400px' }}
        onChange={(e: any) => this.selectObject(e)}
        loadOptions={this.combineObservables}
      />
    )

[captaincole]

Following up on this, I figured out a solution for the v2 version. What you have to do is set the value to null, (and do not set the object to { value: null ...}). Example given below

onFocus = () => { this.setState({ searchValue: null }) }
...
 <Async
        style={selectStyleFn}
        key={'omni-select-monad'}
        name='omni-select'
        value={this.state.searchValue}
        className={style.search}
        placeholder={'Search...'}
        menuContainerStyle={{ maxHeight: '402px' }}
        menuStyle={{ maxHeight: '400px' }}
        onFocus={this.onFocus}
        onChange={(e: any) => this.selectObject(e)}
        loadOptions={this.combineObservables}
      />

[JorgeAguirreLeon]

This is how I've done it (simplified the most I could), hope it can help:

    const { value } = this.props
    const { focus } = this.state
    return (
      <Select
        value={focus ? '' : value}
        onFocus={()=> this.setState({focus: true})}
        onBlur={()=> this.setState({focus: false})}
        blurInputOnSelect={true}
      />
    )

[ykokw]

I solved it by adding custom css for focused AsyncSelect component.

.YOURCLASSNAME__field__control--is-focused .CustomValueRenderClass {
  display: none;
}

[barroudjo]

Cleanest solution:

onInputChange (...args) {
    this.setState({ isLastActionFocus: false });
    this.props.onInputChange && this.props.onInputChange(...args);
  }

  onBlur (...args) {
    this.setState({ isLastActionFocus: false });
    this.props.onBlur && this.props.onBlur(...args);
  }

  onFocus (...args) {
    this.setState({ isLastActionFocus: true });
    this.props.onFocus && this.props.onFocus(...args);
  }

  render () {
    const { value, ...restProps } = this.props;
    return <AsyncSelect
      onInputChange={this.onInputChange}
      value={this.state.isLastActionFocus ? '' : value}
      loadOptions={getAddresses}
      onFocus={this.onFocus}
      onBlur={this.onBlur}
      {...restProps}
    />;

[sombrerox]

CSS fix for 2019, works with version 3.0.4:

Add following properties to your react-select component:

className={"react-select-container"}
classNamePrefix={"react-select"}
and create following CSS:

.react-select__control--is-focused.react-select__control--menu-is-open .react-select__single-value { display: none; }

The current value will not be shown when component is in focus and will return after blur occurs.

[apennell]

Thanks for the simple suggestion, @sombrerox! I used that general CSS approach except instead of targeting their really specific class in a style sheet, I used the style object approach:

const customStyles = {
  singleValue: (provided, state) => {(
    display: state.selectProps.menuIsOpen ? 'none' : 'block',
 )}
}

const App = () => (
  <Select
    styles={customStyles}
    options={...}
  />
);

[CalebCox]

@apennell Thank you for the quick and simple solution! Was wracking my brain on how to handle this properly and none of the other solutions would work properly.

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!

[mattdamon108]

@apennell Thank you. You saved my day.