I'm LOST! Typing values loses focus.

[zmagickap]

I'm really struggling here.

I have Select working to the point it displays the options list and if I select one, the value shows in the text portion of the Select box.

BUT, when I add onInputChange, the Select box loses focus.

The VALUE IS getting set. But, I have to click back in the box after each character.

My Select component is nested inside parent components, but I'm not using a global State, so I can't figure out why this is happening.

I'm relatively new to React and using Functional components, so I can't figure out how to use your sample code. But, I FEEL like I'd done the essence of what's in your sample.

Can anyone talk me through this?

If I type 571 (clicking back into the Select box to give it the focus again, the handleOnChange function does print those numbers to the console, so it appears to be getting set properly.

Here's my code:

import React, { useState } from 'react';
import Select from 'react-select';

function WoSelector() {
  const [Wo, setWo] = useState('');

  const workOrders = [
    { value: '102570', label: '102570' },
    { value: '102571', label: '102571' },
    { value: '102572', label: '102572' },
  ];

  function handleOnChange(inputValue) {
    console.log(inputValue);
    setWo(inputValue);
  }

  const SearchWO = () => (
    <Select
      options={workOrders}
      inputValue={Wo}
      onInputChange={handleOnChange}
    />
  );

  return <SearchWO />;

[zmagickap]

Related, but separate, is that if I click on an item in the list (e.g. 102571), the inputValue sent to the console is empty.

So, if I type 571, it filters down to 102571. Selecting that gives me an empty inputValue.

I'm not passing {Action} to the handler but since, in the code samples, that's just used in a switch block, it seems inputValue should still have a value. No?

[ebonow]

Greetings @zmagickap ,

The issue is how you are declaring SearchWO within WoSelector. This means that every time that WoSelector re-renders, it redeclares SearchWO and it loses the original instance. You can avoid this by simply returning the JSX of SearchWO or declaring SearchWO outside the scope of WoSelector.

This should work better for you...
Working demo: codesandbox

import React, { useState } from "react";
import Select from "react-select";

function WoSelector() {
  const [Wo, setWo] = useState("");

  const workOrders = [
    { value: "102570", label: "102570" },
    { value: "102571", label: "102571" },
    { value: "102572", label: "102572" }
  ];

  function handleOnChange(inputValue) {
    console.log(inputValue);
    setWo(inputValue);
  }

  //const SearchWO = () => (
  return (
    <Select
      options={workOrders}
      inputValue={Wo}
      onInputChange={handleOnChange}
    />
  );

  //return <SearchWO />;
}

export default WoSelector;

[zmagickap]

Thank you so much!!

I cannot for the life of me remember WHY I declared SearchWO like that.

You're a lifesaver!