Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

360
Visualizações
React select npm onBlur function returns An error

Hi everyone I am having an issue with the react-select onBlur function, I did a lot of research and looked into relevant git issues but still couldn't find an answer. OnBlur function does not get the selected values, the value in onBlur is shown undefined. if the answer available please suggest me. Thanks for the help

Codesanbox Link for reference:

Edit strange-sun-uojxs

import React, { useState } from "react";
import Select from "react-select";
import "./styles.css";

export default function App() {
  const [value, setValue] = useState();
  const options = [
    {
      label: "first option",
      value: 1
    },
    {
      label: "second option",
      value: 2
    },
    {
      label: "third option",
      value: 3
    }
  ];

  const onSelect = (value) => {
    setValue(value);
  };
  const onBlurValue = (value) => {
    console.log(value);
  };

  return (
    <div>
      <Select
        value={options.label}
        options={options}
        onChange={onSelect}
        blurInputOnSelect
        onBlur={onBlurValue}
      />
    </div>
  );
}
about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

Consider this code (check out the comments):

import React, { useState } from "react";
import Select from "react-select";
import "./styles.css";

export default function App() {  
  const [value, setValue] = useState();
  const options = [
    {
      label: "first option",
      value: 1
    },
    {
      label: "second option",
      value: 2
    },
    {
      label: "third option",
      value: 3
    }
  ];

  // destructuring the object to get 'value' property
  // (the passed object looks like { label, value } )
  const onSelect = ({value}) => {
    // here the 'value' variable is being set
    console.debug("selected value:", value )
    setValue(value);
  };

  // destructuring event object to get 'target' property
  const onBlurValue = ({target}) => {
    console.log("onBlur target value:", target.value);
    // the value is not updated yet, so it holds the previously set value
    console.log("onBlur value:", value || "undefined");
  };

  return (
    <div>
      Current value is: {value || "undefined" }
      <Select
        // the value prop does nothing here
        // value={options.label}
        options={options}
        onChange={onSelect}
        blurInputOnSelect
        onBlur={onBlurValue}
      />
    </div>
  );
}

Edit relaxed-ellis-y1z2d

As @a.mola said - the setValue hook is asynchronous, and the value variable isn't updated yet when the onBlur event fires, so it holds the previously set value.

I'm not sure about what are you trying to achieve within the onBlur event, it may not be the right place to do it.

If you need to output the value somehow - you can do so within the return part (as is done in code above).

If you need to validate the value or do something based on its newly selected value - you can do so within the onSelect function.

about 4 years ago · Juan Pablo Isaza Relatório

0

You can add an instance variable to store the selected value (maybe not the best solution but it should work)

export default function App() {
  const [value, setValue] = useState();
  const valueRef = useRef();  

  const onSelect = value => {
    valueRef.current = value;
    setValue(value);
  };

  const onBlurValue = () => {
    console.log(valueRef.current);
  };

  return (
    <div>
      <Select
        value={value}
        options={options}
        onChange={onSelect}
        blurInputOnSelect
        onBlur={onBlurValue}
      />
    </div>
  );
}

The problem with this solution is that you store the selected value in two places (the state variable and the reference instance variable).

The question is, why do you need the get the selected value inside the onBlur handler ? The onChange handler might be sufficient in your case, isn't it ?

about 4 years ago · Juan Pablo Isaza Relatório

0

That might be a problem with React of that version, or conflicting between react-select and that specific version of react

Try to upgrade both react and react-dom to the latest version (17.0.2) and react-select to 4.3.1 solve the issue.

Working Example:

Edit distracted-wright-cp0ws

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda