renderInputComponent only works with stateless functions, not classes.

[naomiajacobs]

Are you reporting a bug?

No.

Currently, the autowhatever does not support using a class for the input component - see here.

Relevant code:

const inputComponent = renderInputComponent({
      type: 'text',
      value: '',
      autoComplete: 'off',
      role: 'combobox',
      'aria-autocomplete': 'list',
      'aria-owns': itemsContainerId,
      'aria-expanded': isOpen,
      'aria-haspopup': isOpen,
      'aria-activedescendant': ariaActivedescendant,
      ...theme(`react-autowhatever-${id}-input`, 'input'),
      ...this.props.inputProps,
      onKeyDown: this.props.inputProps.onKeyDown && this.onKeyDown,
      ref: this.storeInputReference
    });

As you can see, the component is invoked as a pure function. When we tried to use a component that extends from React.Component, this method failed with Uncaught TypeError: Cannot call a class as a function at the function shown above. It would be great to be able to support both types.

• Please create a Codepen that demonstrates your issue. You can start from this example.

http://codepen.io/naomiajacobs/pen/YNZbGb
As you can see, when the input component is a class, the autowhatever breaks.

• Provide the steps to reproduce the issue.
  Pass in a class instead of a pure function to the autowhatever for renderInputComponent. (see codepen above).

Are you making a feature request?

Yes

• Please describe your use case.
  The generalized case is that we want to be able to use React lifecyle hooks in our input component.

The specific case is that we're making our input fancy with icons and stuff, and need to add click behavior to the icons so that when you click on them, the input focuses even though you didn't actually click on the input.

• If you have ideas how to extend the Autowhatever API to support your new feature, please share!

Inside of the autowhatever, it could check to see if the inputComponent is a class or a function, and initialize it accordingly.

[naomiajacobs]

/cc @juanca @andrewjleavitt @lambdatastic @naganowl

[juanca]

Would wrapping the component in a function help?

renderInputComponent: () => InputComponent

However, I'd prefer a more intuitive API for react-autowhatever.

[naomiajacobs]

Yep, this works (sort of - we actually have renderInputComponent: (props) => { return <TextField {...props} />; },. But it seems like this shouldn't be necessary; it would be great if the autowhatever supported classes, too, since it's supposed to be working with React - there's a reasonable expectation that people will want to pass classes in.