Changing other input field values clears SELECT values

[vkallore]

Thank you so much for this plugin. I'm facing an issue with this.

I have a form with different input fields. Select works as expected, but on changing of input field value, SELECT field values get cleared. What could be the reason? I'm having different onChange listeners for SELECT and INPUT.

Example code with issue is given below. I'm not sure how to create a JSFiddle with React Select. Sorry for that.

/* eslint react/prop-types: 0 */

import React from 'react';
import ReactDOM from 'react-dom';
import Select from 'react-select';

require('react-select/dist/react-select.min.css');

var options = [
    { value: 'one', label: 'One' },
    { value: 'two', label: 'Two' }
];

var Hello = React.createClass({

  handleChange: function(date) {
    this.setState({
      startDate: date
    });
  },
  render: function() {
    return (
      <div>
        <input 
          className="form-control"
          defaultValue=''
          name="postal_code"
          type="text"
          onChange={this.handleChange} />
        <Select
          name="city"
          options={options}
          onChange={onSelectChange} />
      </div>);
  }
});
function onSelectChange(val) {
  console.log("Selected: " + val);
}
ReactDOM.render(
  <Hello />,
  document.getElementById('userProfileDetails')
);

[vkallore]

I have a solution for this. But not sure whether this approach is correct or not. Please advise.

Earlier, I wasn't saving the Select state and when the value changes in the text, the render executes and takes the default value!

I'm also passing a default value (like, imagine the default value is loaded from DB)

See the fix below.

/* eslint react/prop-types: 0 */

import React from 'react';
import ReactDOM from 'react-dom';
import Select from 'react-select';

require('react-select/dist/react-select.min.css');

var options = [
    { value: 'one', label: 'One' },
    { value: 'two', label: 'Two' },
    { value: 'test', label: 'TEST' }
];

var Hello = React.createClass({
  getInitialState: function() {
    return {
      selectValue: ''
    }
  },
  handleChange: function(date) {
    this.setState({
      startDate: date
    });
  },
  onSelectChange: function(value) {
    this.setState({
      selectValue:value
    });
  },
  getSelectValue: function(val) {
    return (this.state.selectValue == '') ? val : this.state.selectValue;
  },
  render: function() {
    return (
      <div>
        <input 
          className="form-control"
          defaultValue=''
          name="postal_code"
          type="text"
          onChange={this.handleChange} />
        <Select
          name="city"
          options={options}
          value={this.getSelectValue('test')}
          onChange={this.onSelectChange} />
      </div>);
  }
});

ReactDOM.render(
  <Hello />,
  document.getElementById('userProfileDetails')
);

[bladey]

Hello -

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

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request 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.

[Menolas]

Hello, i have a close issue ans could not find a solution, in my case i have a select along with other fields and defined list of options for select, first user suppose to click on the select and choose the value, then according that value it shows the propper field, but when user makes changes through autofil in appiered field select catching that value and showing it along with option "no options" in dropdown - here is screenshot https://prnt.sc/J_rN7RpCJ1OL - and here is my react-select in code

`import * as React from 'react'
import {ErrorMessage, Field, Form, Formik, FormikHelpers, FormikValues, useField } from 'formik'
import {phoneRegex} from '../../utils/validators'
import * as Yup from 'yup'
import {BookConsultationFormValues} from "../../types/Types";
import {FieldComponent} from "./FieldComponent";
import {useState} from "react";
import {FieldWrapper} from "./FieldWrapper";
import {FormSelect} from "./FormSelect";
import * as yup from "yup";

const options = [
{ value: "email", label: "email" },
{ value: "phone", label: "phone" },
{ value: "whatsapp", label: "whatsapp" },
{ value: "messenger", label: "messenger" },
{ value: "insta", label: "insta" }
]

const validationSchema = Yup.object().shape({
bookingName: Yup.string()
.min(2, 'Must be minimum longer two characters')
.max(30, 'Must be shorter than 31 character')
.required('Required Field'),
contact: Yup.string()
.required("Please select a way to contact you"),
email: yup.string()
.email("Email should have correct format"),
phone: yup
.string()
.min(8, 'Phone number is too short - should be 8 chars minimum.')
.matches(phoneRegex, "That does not look like phone number"),
insta: yup
.string()
.min(3, 'Insta name is too short - should be 3 chars minimum.'),
messenger: yup
.string()
.min(3, 'Messenger name is too short - should be 3 chars minimum.'),
whatsapp: yup
.string()
.min(7, 'Whatsapp number is too short - should be 7 chars minimum.')
.matches(phoneRegex, "That does not look like whatsapp number"),
message: Yup.string()
.min(20, 'Must be minimum longer twenty characters')
.max(200, 'Must be shorter than 200 character')
.required('Required Field'),
consent: Yup.boolean().oneOf([true],'Required Field')
})

type PropsType = {
consentId: string
bookConsultation: (values: BookConsultationFormValues) => void
closeBookingModal?: () => void
}

export const BookingForm: React.FC = React.memo(({
consentId,
bookConsultation,
closeBookingModal,
}) => {

const [contactInput, setContactInput] = useState('')

const handleChange = (input: string) => {
setContactInput(input)
}

const submit = (values: BookConsultationFormValues, actions: FormikHelpers) => {
bookConsultation(values)
if (closeBookingModal) {
closeBookingModal();
}
actions.setSubmitting(false)
actions.resetForm()
}

const initialValues: BookConsultationFormValues = {
bookingName: '',
contact: null,
email: '',
phone: '',
insta: '',
whatsapp: '',
messenger: '',
message: '',
consent: false,
}

return (

{(propsF) => {
let {isSubmitting} = propsF

    return (
      <Form id="booking"
        className="form booking__form"
      >
        {/*<pre>{JSON.stringify(propsF, undefined, 2)}</pre>*/}
        <FieldComponent
          name={'bookingName'}
          type={'text'}
          placeholder={'Your Full Name'}
          value={propsF.values.name}
          onChange={propsF.handleChange}
        />

        <FieldWrapper
            wrapperClass={'booking__input-wrap'}
            name={"contact"}
        >
          <FormSelect
              name="contact"
              options={options}
              handleChange={handleChange}
              placeholder={'Choose the way you want me to contact you'}
          />
        </FieldWrapper>
        { contactInput &&
            <FieldComponent
                name={contactInput}
                type={'text'}
                placeholder={'Your contact'}
                value={propsF.values.contactInput}
                onChange={propsF.handleChange}
            />
        }
        <FieldWrapper
            wrapperClass={'booking__input-wrap'}
            name={"message"}
        >
          <Field
              component="textarea"
              name="message"
              placeholder={'Your message'}
              value={propsF.values.message}
              onChange={propsF.handleChange}
          />
        </FieldWrapper>
        <FieldWrapper
            wrapperClass={'form__input-wrap--checkbox'}
            name={"consent"}
        >
          <Field
              type="checkbox"
              name="consent"
              id={consentId}
              value={propsF.values.concent}
              onChange={propsF.handleChange}
          />
          <label htmlFor={consentId}>
            <span className="checkbox">{''}</span>
            CONSENT WITH PROCESSING OF MY PERSONAL DATA
          </label>
        </FieldWrapper>
        <button
          type="submit"
          disabled={isSubmitting}
          className="btn btn--bg btn--transparent form__submit-btn booking__submit-btn"
        >
            {isSubmitting
                ? 'Please wait...'
                : 'BOOK A CONSULTATION'
            }
        </button>
      </Form>
    )
  }}
</Formik>

)})
`