I've encountered an issue with my search suggestions list created using the Link API. The onClick handler doesn't trigger as expected. How should I go about fixing this?
Below is the code for my list:
<Paper
elevation={5}
sx={{ maxWidth: { xs: "100%", md: "45%" }, marginTop: "10px" }}
>
<List sx={{ paddingTop: "20px", paddingBottom: "30px" }}>
{topResponses.map((response, index) => {
return (
<>
<ListItemButton
id={response}
sx={{
paddingTop: "20px",
paddingBottom: "10px",
border: "2px solid red",
}}
onClick={(event) => {
console.log("clicked");
}}
>
<ListItemText
primary={response}
primaryTypographyProps={{
fontSize: "18px",
fontWeight: "bold",
}}
/>
{/* <p>{response}</p> */}
</ListItemButton>
<Divider variant="middle" textAlign="center" />
</>
);
})}
</List>
</Paper>
I suspect that my focus-related event handling might be causing the issue since the click event should trigger on selecting a search result. Could this be the reason behind the problem?