Clicking on footer template closes suggestion list

[natsuo]

Clicking on the footer template, or any of the elements inside the footer template causes the component to close the suggestion list.

The footer template can be used in a variety of ways, including:

• Showing suggestion/item count.
• Showing a label with a description or help.
• Showing a link/logo to the service providing the suggestions (like weather service provider).

Clicking outside the list entirely should obviously close the suggestions list.

[chrissainty]

Thanks for reporting this @natsuo. Definitely something we need to get fixed!

[chrissainty]

I think we need to establish the use cases for the footer/header templates. I can add a link to the footer template and I can click on the link without issue. Yes, the suggestion list then closes but I'm not sure why it should stay open.

@natsuo Could you clarify the type of behaviour you're after and maybe some context?

[natsuo]

This example shows header and footer templates. Footer has item count. Header has button to create a new product and a checkbox to toggle if disabled items should be shown in the list or not.

Nothing happens if you click on any whitespace area. The suggestion list disappears only if you click on a suggestion item, or outside the window.

[chrissainty]

Ok, thanks for the reply. I don't think this is going to be easily resolved, I'll need to have a think. The mechanism for closing the suggestion list works by focus being lost on the underlying input control. This means we don't have to resort to JavaScript interop.

At the moment I think to get the behavior you're after we would need to do a lot more JavaScript interop, which I'd prefer to not do if we can help it. Leave it with me and I'll see what I can come up with.

[vertonghenb]

Maybe this is something we can easily fix with the new Blazor version (3.1 p2+)
Stop event propagation in Blazor apps
https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-1-preview-2/

This could also clean-up the last real interop code addKeyDownEventListener.

[chrissainty]

You might be right @vertonghenb. Do you want to have a go at this one? If not I'll code it up when I get a chance.

[chrissainty]

@vertonghenb I've tried using the new prevent default directive but no joy at all. It no effect. I put a prevent default on every event and still nothing was blocked.

[vertonghenb]

@chrissainty Hehe, I tried the exact same thing but no luck, well it worked in the standalone example. But the validation while using it in a form messes things up.

[chrissainty]

I'm doing some housekeeping. Looking back at this issue now it seems like we need to take some more aggressive steps to keep the suggestion list open after clicking on a header or footer link.

Personally, I'm not sure it's something we should look to do right now. As I mentioned before I think this would involve a lot more JS and I'm not sure of the demand for this feature. Based on all this I'm going to close this issue for now. But please reopen if anyone feels this needs more discussion/attention.