We are using the auto complete component that does a fetch for server side data based on the users entered text. We need to take action once they select an item from the list.
I don't see an onSelected event for the Autocomplete box. We did see it on (I believe) the combo box. Image of event attached.
We tried the combo box but didn't get the functionality we were looking for with the typeahead search.
The closest thing I found to working around the issue was to use itemRender and attach the click event to the div, but this is more of a hack as you can click just outside the div and still select what you want without firing the onclick.
const itemChildren = (
//TODO, How can I add the onclick to the LI instead of this div.
<div onClick={onClickPatientSelect} style={{ width: "100%", backgroundColor: "lightseagreen" }}>
{ li.props.children}
</div>
);
return React.cloneElement(li, li.props, itemChildren);
Here is the current autocomplete code
<AutoComplete
data={searchPatientData}
value={searchText}
onChange={onChange}
textField="SearchDisplay"
placeholder="Search for a patient"
loading={loading}
itemRender={itemRender}
/>