onInputChange event not firing for AsyncCreatable

[rubencodes]

I'm trying to do some realtime cleaning of input as shown on the README.MD:

function cleanInput(inputValue) {
      // Strip all non-number characters from the input
    return inputValue.replace(/[^0-9]/g, "");
}   

<Select
    name="form-field-name"
    onInputChange={cleanInput}
/>

However, when using this option with AsyncCreatable, I'm finding it doesn't run at all. I'm on version 1.0.0-rc.2.

[agirton]

Hi @rubencodes can you give a reproducible case? I ran the test suite and confirmed that onInputChange is being called. Here is the test case I ran on the AsyncCreatable

it('should fire onInputChange', () => {
  let onInputChange = sinon.spy();

  createControl({ onInputChange });
  typeSearchText('a');
  expect(onInputChange, 'was called with', 'a');
});

[stahlmanDesign]

I also find it does nothing in 1.0.0-rc.3

<Select.Async
  onInputChange={ (input)=>{console.log(input)} }
/>

I wanted to use it to know when characters have been deleted with backspace to update my keyword.

Duplicate of #1283 and mentioned here #1257

[stahlmanDesign]

I realized that the function I was looking for is onInputKeyDown which works fine. I might have caused some confusion. I no longer think my issue may is related to the onInputChange problem some people are having.

[mhubenthal]

@agirton I am seeing this issue as well for the Creatable component. The bug lies on these lines in that component:

onInputChange (input) {
	const { onInputChange } = this.props;

	if (onInputChange) {
		onInputChange(input);
	}

	// This value may be needed in between Select mounts (when this.select is null)
	this.inputValue = input;
}

Even though onInputChange() is called, the value is not returned. When I just use the Select component I am able to apply a masking function, whereas when using the Creatable component, that masking function value is never returned from the Creatable onInputChange call to the Select component. The function passed in as a prop is called, but the value is never returned up the call stack.

The correct code would look like this:

onInputChange (input) {
	const { onInputChange } = this.props;

	// This value may be needed in between Select mounts (when this.select is null)
	this.inputValue = input;

	if (onInputChange) {
		return onInputChange(input);
	}
}

cc: @JedWatson

[adrianojdesouza]

@agirton any news about this issue? I saw PRs for fix this and they had not merged

[JedWatson]

I think this has been addressed, although if the input value is mutated by onInputChange it is not returned, just used for loadOptions which is inconsistent with the way Select and Creatable handle the prop. I'm going to follow up in #2056