Easier Modal Scrollbars

[riziles]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

I've observed some puzzling behavior on modals:

• If I add a hyperlink at the end of a modal body, for some reason the modal will pop up scrolled all the way to the bottom.
• I can work around it, but I believe the behavior produced by the workaround should be the default behavior

What type of pull request would this be?

Enhancement

Any links to similar examples or other references we should review?

This is my workaround:

<script>
  import { Modal, modalStore } from '@skeletonlabs/skeleton';

  async function triggerAlert() {
    const alert = {
      type: 'alert',
      title: 'Example Alert',
      body: `Lorem ipsum dolor sit amet, consectetur 
        adipiscing elit. Curabitur at mauris ut nisl molestie 
        eleifend ac a neque. Nunc sit amet malesuada orci. Sed 
        id consequat neque. Pellentesque vel 
        urna varius, fringilla odio et, congue diam. 
        <br /> <br /> 
        <a href="https://google.com">href</a>`,
      buttonTextCancel: 'Cancel'
    };
  // workaround for scroll issue:
    await modalStore.trigger(alert);
    document.querySelector('.modal-body').scrollTop = 0
  }
</script>

<Modal regionBody = 'max-h-24 overflow-auto' width = 'max-w-xs'/>

<div class="container h-full mx-auto flex justify-center items-center">
  <button class="btn variant-filled-primary btn-base" on:click={triggerAlert}> Open Modal </button>
</div>

[endigo9740]

@riziles I've made reference to this here:

• Polish and refine all Skeleton features #782 (comment)

We're in a polish phase for Skeleton and going in this order: Elements (done), Components (in progress), Utilities (up next). Given modals are a utility feature they'll come during that phase. Cross posting will help me see this when we get to that point.

Thanks for sharing.

[riziles]

FYI, awaiting the trigger is not reliable. A more reliable workaround is to put a hidden input tag at the top of the modal body to steal the focus:

<script>
  import { Modal, modalStore } from '@skeletonlabs/skeleton';

  function triggerAlert() {
    const alert = {
      type: 'alert',
      title: 'Example Alert',
      body: `<input class = "hidden">Lorem ipsum dolor sit amet, consectetur 
        adipiscing elit. Curabitur at mauris ut nisl molestie 
        eleifend ac a neque. Nunc sit amet malesuada orci. Sed 
        id consequat neque. Pellentesque vel 
        urna varius, fringilla odio et, congue diam. 
        <br /> <br /> 
        <a href="https://google.com">href</a>`,
      buttonTextCancel: 'Cancel'
    };
  modalStore.trigger(alert);
  }
</script>

<Modal regionBody = 'max-h-24 overflow-auto' width = 'max-w-xs'/>

<div class="container h-full mx-auto flex justify-center items-center">
  <button class="btn variant-filled-primary btn-base" on:click={triggerAlert}> Open Modal </button>
</div>

[endigo9740]

Solved as part of: #922

Closing this ticket. Please refer any further comments to the ticket linked above.