bestguy / sveltestrap

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

Popover does not re-position when target id changes #481

Open jcalfee opened 2 years ago

jcalfee commented 2 years ago

The first click (Button "one" in this case) works as expected: image

At this point, a click on the other button (two) should re-position the Popover to the other button but, instead, updates the Popover over one button: image

Codesandbox

<script>
  import { Popover, Button } from "sveltestrap";
  import { Styles } from "sveltestrap";

  let isOpen;
  let cmpId = null;

  function one() {
    isOpen = true;
    // cmpId = null;
    cmpId = "one";
  }

  function two() {
    isOpen = true;
    // cmpId = null;
    cmpId = "two";
  }

  function close() {
    cmpId = null;
    isOpen = false;
  }
</script>

<Styles/>

<main>
  <div class="container">
    cmpId {cmpId}, isOpen {isOpen}
    <div class="row">
      <Button id="one" class="col-6" on:click={one}>one</Button>
      <Button id="two" class="col-6" on:click={two}>two</Button>
    </div>

    {#if cmpId}
      <Popover target={cmpId} isOpen={isOpen}>
        <div slot="title" on:click={close}>Close</div>
        popover {cmpId}
      </Popover>
    {/if}
  </div>
</main>
    "svelte": "^3.46.0",
    "sveltestrap": "5.9.0"

There are other odd behaviors like clicking on button one opens and closes the Popover. Also using the "close" title crashes the Codesandbox browser preview.

jcalfee commented 2 years ago

Great library! I'm so happy to have this for svelte..