Autocomplete footer not allowing onClick

[jirom]

How did you install the Amplify CLI?

No response

If applicable, what version of Node.js are you using?

No response

Amplify CLI Version

1.0.1

What operating system are you using?

Ubuntu (wsl2)

Did you make any manual changes to the cloud resources managed by Amplify? Please describe the changes made.

No

Describe the bug

When using a component with an onClick attribute in the Footer menuSlot of Autocomplete, the onClick callback is not getting invoked.

When I click "See more results", the callback does not get invoked.

Expected behavior

Components in the footer should receive click events.

It looks like the footer was created to allow additional actions to be added. However components added to the footer don't seem to be receiving click events. If this is the expected mechanism to trigger actions, then it's not clear based on the documentation.

Reproduction steps

1. Use the exact code from the example in the autocomplete documentation
2. Update the Link component and add this attribute onClick={() => console.log('footer clicked')}
3. Click on the "See more results..." link in the autocomplete

Result:

• Autocomplete closes.
• Nothing is printed in the console logs.

Project Identifier

No response

Log output

# Put your logs below this line

Additional information

No response

Before submitting, please confirm:

• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• [X] I have removed any sensitive information from my code snippets and submission.

[AnilMaktala]

Hi @jirom, Thanks for raising this. Transferring to the amplify-ui repo for better assistance.

[thaddmt]

Verified this is a bug in auto complete with the ordering of onBlur and onClick events. Here is a stackblitz that shows how to reproduce / work around while we get this fixed - https://stackblitz.com/edit/nextjs-gqdmlo?file=app%2Fpage.tsx