Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

-Added hideOnOutClick #418

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

-Added hideOnOutClick #418

wants to merge 2 commits into from

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 join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants