load options again in a async select after another input's change

Viewed 31

The thing is that I have some profiles with some lease that I want to duplicate, so I need in first time charge all profiles and then I need to select a lease to get its name and use it.

When I load the section I can do that I want, but when I try to change the profile, after having previously selected one, still remains the lease that belongs to the first profile.

here is my code:

const Form = ({ errors, onLeaseProfileSearch, organization, setFieldError, setFieldValue, values: lease }) => {
  const handleFieldChange = fieldName => value => {
    setFieldValue(fieldName, value);
    setFieldError(fieldName, null);
  };

  const onLeaseSearch = nameCont => {
    const response = LeaseRepository.index(LeaseProfilePresenter.id(lease.profile), {
      q: { nameCont, profileIdEq: LeaseProfilePresenter.id(organization) },
      s: ['name DESC'],
    })
      .then(extractResponseData)
      .then(prop('leases'));
    return response;
  };

  return (
    <div className={classes.root}>
      <Field error={errors.profile} title="Profile">
        <AsyncSelect
          cacheOptions
          className={classes.select}
          defaultOptions
          getOptionLabel={LeaseProfilePresenter.displayName}
          getOptionValue={LeaseProfilePresenter.id}
          height={32}
          loadOptions={onLeaseProfileSearch}
          onChange={handleFieldChange('profile')}
          searchable
          theme="bright"
          value={lease.profile}
        />
      </Field>
      {lease.profile && (
        <Field error={errors.sourceLease} title="Lease to Duplicate">
          <AsyncSelect
            key={lease.profile}
            className={classes.select}
            defaultOptions
            getOptionLabel={LeaseProfilePresenter.name}
            getOptionValue={LeaseProfilePresenter.id}
            height={32}
            loadOptions={onLeaseSearch}
            onChange={value => {
              handleFieldChange('sourceLease')(value);
              handleFieldChange('name')(`${value.name} Copy`);
            }}
            searchable
            theme="bright"
            value={lease.sourceLease}
          />
        </Field>
      )}
      {lease.sourceLease && (
        <Field error={errors.name} title="Lease Name">
          <Input name="name" onChange={handleFieldChange('name')} value={lease.name} />
        </Field>
      )}
    </div>
  );
};

Form.propTypes = {
  errors: PropTypes.shape().isRequired,
  onLeaseProfileSearch: PropTypes.func.isRequired,
  organization: OrganizationPresenter.shape().isRequired,
  setFieldError: PropTypes.func.isRequired,
  setFieldValue: PropTypes.func.isRequired,
  values: LeasePresenter.shape().isRequired,
};

export default Form;

0 Answers
Related