Skip to content
This repository was archived by the owner on Apr 19, 2025. It is now read-only.

Conversation

Inqnuam
Copy link

@Inqnuam Inqnuam commented Jan 6, 2022

Hides Popover on click outside of itself
Useful when bind:isOpen to make Popover interactive but makes it act like Bootstraps original Popover's behaviour

usage:

<Popover bind:isOpen={isPopoverOpen} hideOnOutClick={true} > ... </Popover>

@bestguy
Copy link
Owner

bestguy commented Jan 9, 2022

Thanks @Inqnuam , actually I think this is supported already via dismissible prop:

<script lang="ts">
  import { Popover } from 'sveltestrap';
</script>

<a class="btn btn-secondary" id="btnDismissible" tabindex="0">Click me</a>
<Popover placement="right" target="btnDismissible" dismissible>
  <div slot="title">
    <i>Hello</i> <b>World!</b>
  </div>
  This Popover dismisses when clicked outside.
</Popover>

https://sveltestrap.js.org/?path=/story/components--popover

Could you take a look and let me know if this is still needed?

@Inqnuam
Copy link
Author

Inqnuam commented Jan 9, 2022

Thanks @Inqnuam , actually I think this is supported already via dismissible prop:

<script lang="ts">
  import { Popover } from 'sveltestrap';
</script>

<a class="btn btn-secondary" id="btnDismissible" tabindex="0">Click me</a>
<Popover placement="right" target="btnDismissible" dismissible>
  <div slot="title">
    <i>Hello</i> <b>World!</b>
  </div>
  This Popover dismisses when clicked outside.
</Popover>

https://sveltestrap.js.org/?path=/story/components--popover

Could you take a look and let me know if this is still needed?

Hello,
Actually I was never been able to make it work properly with dismissible prop.
dismissible closes the popover on next click no matter where we click.

hideOnOutClick closes only when clicked target isn't the popover so it gives us the possibility to interact with it without closing it

@bestguy
Copy link
Owner

bestguy commented Jan 9, 2022

Ah, okay thanks for the explanation, let me review in next day or two as might be another prop we could use.

@Inqnuam
Copy link
Author

Inqnuam commented Oct 16, 2022

Hello @bestguy
Any progress about this feature?

@ghacosta
Copy link

ghacosta commented Aug 3, 2023

I'm facing same issue dismissible prop is not working when used on a controlled popover.

@dysfunc dysfunc mentioned this pull request Dec 17, 2023
59 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants