How to show a popover while retaining focus?

How can I show a popover without giving focus to it?

Use case: I want to use it inside my editor for visual autocompleting feedback. :slight_smile:

Please keep us updated on how the autocomplete goes. I’m trying to figure out how to implement an autocomplete input and was considering ion-popover as well.

Does it work as expected if you set keyboardClose to false when creating your popover? The API for this is not very clear, so we are looking into ways to improve this.

1 Like

Setting keyboardClose to false did solve the issue, thanks for the tip!

I’m testing using a popover for a single-item autocomplete suggestion and it’s working alright. Main issue is when you tap the item in the popover to set it as the input value, focus goes from the input to the popover then back to the input after the popover closes, which causes the iOS keyboard to cycle from shown to hidden to shown and looks a bit buggy. Will report if I’ve figured out a solution and am open to suggestions in the meantime.

1 Like

Glad it works! We are looking into ways to give developers better control over the focus behavior with overlays, so this context is really helpful.

@tetsuwanadam Can you share your code? I’m trying to implement a combobox/autocomplete as well and havin issues with the popover taking focus, and I can’t refocus the corresponding input.

Thanks,

-Mike

I set the popover using the component in my template with keyboard-close=“false” like @ldebeasi suggested.

<!-- Suggestions popover -->
<ion-popover @ionPopoverDidDismiss="onPopoverDismissed" is-open="false" :event="popoverEvent" keyboard-close="false" ref="ionPopover">
	<ion-content>
		<ion-item @click="setInputFromPopover" lines="none">
			<ion-label>{{ popoverText }}</ion-label>
		</ion-item>
	</ion-content>
</ion-popover>

When there’s an autocomplete match I call
await ionPopover.value.$el.present();

And when there’s no match or I need to close the popover for some other reason I call
ionPopover.value.$el.dismiss();

Hope that helps :slight_smile: