Weird onChange & onSelect trigger behaviour

[manelet]

Hi there!

I don't get exactly why but my onSelect & onChange functions are being triggered each time a user type inside the input.

I expected onChange to have this behaviour but not with onSelect. I thought onSelect would be triggered only when a user clicks on a suggestion, also the function parameters received for both looks like the same, which according to docs, onSelect should receive the itemand the value

I'm a bit confused, I don't know if I'm either wrong with my assumptions or my code.

Thanks in advance for your time!

import React, { Component } from 'react';
import Autosuggest from 'react-autosuggest';

const teams = [
    {
        name: `FC Barcelona`,
        suggestions: ['fc barcelona', 'fcb', 'barça']
    },
    {
        name: `Real Madrid`,
        suggestions: ['real madrid', 'blanco']
    }
];

const getSuggestions = value =>    
    [].concat.apply([], teams.map((team, index) =>
        team.suggestions.map(suggestion => {
            if(suggestion.toLowerCase().indexOf(value.trim().toLowerCase()) > -1) {
                return teams[index];
            }
            return undefined;
        }).filter(suggestion => suggestion !== undefined)
    ))

const getSuggestionValue = suggestion => suggestion.name;

const shouldRenderSuggestions = (value)  => value.trim().length > 3;

const renderSuggestion = suggestion => <div>{suggestion.name}</div>

class Buscador extends Component {

    constructor() {
        super();
        this.state = {
            value: "",
            suggestions: []
        }
    }

    onChange = (event, { newValue }) => {
        console.log('CHANGE', event, newValue);
        this.setState({
            value: newValue
        });
    }

    onSelect = (value, item) => {
        console.log('SELECT', value, item);
    }

    onSuggestionsFetchRequested = ({ value }) => {
        this.setState({
            suggestions: getSuggestions(value)
        });
    }

    onSuggestionsClearRequested = () => {
        this.setState({
            suggestions: []
        });
    }

    render () {  
        const { value, suggestions } = this.state;

        const inputProps = {
            placeholder: '¿Equipo?',
            value,
            onChange: this.onChange,
            onSelect: this.onSelect
        };

        return (
            <Autosuggest
                suggestions={suggestions}
                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                getSuggestionValue={getSuggestionValue}
                renderSuggestion={renderSuggestion}
                shouldRenderSuggestions={shouldRenderSuggestions}
                inputProps={inputProps}
            />
        );
    }
}

export default Buscador;

[manelet]

I believe I'm in the wrong repo, my bad 🙏