Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AsyncCreatable LOSES FOCUS WHEN OPTIONS ARRIVES FROM API

See original GitHub issue

I am using the async-Creatable field which looks like the below. When options arrive from the API call, Select Field losses focus from the text-area and if I click the text area again it will clear text-field. I saw this suggestion

You can fix this by either moving the Input definition outside render(), or commenting out the inputValue/onInputChange props.

But it’s not working for me.

 <AsyncCreatable
          components={selectComponents}
          name={name}
          styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
          menuPortalTarget={shouldPortal ? document.body : null}
          onChange={onChange}
          onCreateOption={handleCreate}
          closeMenuOnScroll
          value={value}
          formatCreateLabel={inputVal => `${createLabel || 'create'} "${inputVal}"`}
          isValidNewOption={isValidNewOption}
          loadOptions={promiseOptions}
          {...selectProps}
          {...restInput}
        />

    const selectComponents = ({
      Control: props => <ControlComponent controlProps={props} label={label} required={required} value={value} name={name} />,
      ValueContainer,
      Menu,
      Option: props => <Option optionProps={props} rest={rest} />
    });

Please let me know how can I fix this problem .