CODEWITHSUNDEEP
react-select
gbragamonte
gbragamonte

Reputation: 125

How to make react-select searchable always show clear indicator

Actually, clear indicator only show when value has selected, i want to show up this when any value has type.

The reason is simple, easy clear current value search typed.

Upvotes: 1

Views: 1450

Answers (2)

H. Wynn
H. Wynn

Reputation: 493

  const [value, setValue] = useState<any>(null)

  const onChange = (option: any, { action } : {action: any}) => {
    if (action === "clear") {
      setValue(null)
    }

    if (action === "select-option") {
     setValue(option)
    }
  };

  const onInputChange = (string: any, { action }: {action: any}) => {
    if (action === "input-change") {
      setValue({ value: string, label: string });
    }

    if (action === "menu-close") {
      setValue(null)
    }
  };

Upvotes: 0

Laura
Laura

Reputation: 8630

One solution to your problem is to use state to store the inputValue as value like the following code:

  onChange = (option, { action }) => {
    if (action === "clear") {
      this.setState({
        value: null
      });
    }

    if (action === "select-option") {
      this.setState({
        value: option
      });
    }
  };

  onInputChange = (string, { action }) => {
    if (action === "input-change") {
      this.setState({
        value: { value: string, label: string }
      });
    }

    if (action === "menu-close") {
      this.setState({
        value: null
      });
    }
  };

You can see with this piece of code:

    if (action === "input-change") {
      this.setState({
        value: { value: string, label: string }
      });
    }

That you fake a value and as every time a value is set the clear function is enabled, it does the trick. You can find a live version of this code here.

Upvotes: 3

Related Questions