How to use props.customListComponent?

[chrispeterson3]

It seems that the default functionality breaks when you use props.customListComponent. Is there any custom configuration that has to be done in order to get this to work?

For instance, when you type a value in the input and press the TAB key, there is an error, arrow keys don't work, and you can't click on a selection.

[eddts]

I'm still sort of struggling through this as there's not a lot of documentation about it. Specifically getting the arrow keys to work and suppress the tab key event which currently submits the form!

In the most basic implementation, though, you just have to ensure that the items that list out your options have an onClick binding which calls the onOptionSelected function which is passed through, and passes it the option that has been clicked on.

i.e: onClick={this.props.onOptionSelected.bind(null, option)}

Chuck that on each <li> or whatever you're using to list them and you should be good to go.

[burmester]

This is how i use it:

< Typeahead options={schooltype.list} maxVisible={5} customListComponent={TypeaheadItem} filterOption={filterOption} displayOption={this.handleItemClick} placeholder={placeholder} / >

var TypeaheadItem = React.createClass({
    handleOnClick: function (e) {
        this.props.displayOption(e);
    },
    render: function () {
        var list = _.map(this.props.options, function (item) {
            return (
                <button key={item.id} type="label" className="tag tag-curriculum"
                        id={item.id} title={item.title} onClick={this.handleOnClick}>
                    {item.abbr}
                </button>
            )
        }.bind(this));

        return (
            <div className="dropdown-background">
                {list}
            </div>
        );
    }
});`

[marlenebowles]

I'm also having trouble getting accessibility to work when using CustomListComponent as well. It looks like the onKeyDown doesn't read any arrow up or down events. Has anyone been able to replicate the accessibility?