Autosuggest: onSelect event does not fire

[solamanhuq]

Describe the bug As the title suggests, if I provide an onSelect hook for Autosuggest, it does not trigger.

To Reproduce We can set up an arbitrary Autosuggest component. We can pass a method to onSelect that throws if called. Note that this does not throw:

import React from 'react';
import { Autosuggest } from '@cloudscape-design/components';
import { fetchSecurityGroups } from '../security-group-selects/security-groups-provider';

export default class CountriesAutosuggest extends React.Component {
  pageNumber = null;
  filteringText = '';
  state = {
    value: '',
    options: ['option 1', 'option 2'],
  };

  handleChange = event => {
    this.setState({ value: event.detail.value });
  };

  handleSelect = event => {
      throw new Error('this never gets hit');
      this.setState({ value: event.detail.value }); 
  }

  enteredTextLabel = value => `Use: "${value}"`;

  render() {
    const { status, value, options } = this.state;
    return (
      <Autosuggest
        value={value}
        empty="No security groups found"
        statusType={status}
        options={options}
        filteringType="manual"
        enteredTextLabel={this.enteredTextLabel}
        onChange={this.handleChange}
        onSelect={this.onSelect}
      />
    );
  }
}

Environment (please complete the following information):

• Browser: chrome

Additional context Add any other context about the problem here.

[just-boris]

Hello!

First of all, if you are using @cloudscape-design/components, we recommend reaching out to us via https://github.com/cloudscape-design/components repository. The aws/awsui-documentation repo is only for legacy @awsui/components-react package.

To answer your actual question, it seems like there is a typo in your code. The handler is called handleSelect and you pass this.onSelect.

---

Also, note that options should not be an array of strings, but an array of objects like this [{value: 'option 1'}, {value:'option 2'}],