bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.3k stars 183 forks source link

-Added hideOnOutClick #418

Open Inqnuam opened 2 years ago

Inqnuam commented 2 years ago

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}

... `

bestguy commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

Inqnuam commented 1 year ago

Hello @bestguy Any progress about this feature?

ghacosta commented 1 year ago

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