Modal with scrollable content opens to bottom scroll position

[aroth]

Any thoughts or a workaround for this? Would expect it to be scrolled to the top. Relying on this hack for now:

<button data-action="modal#open:prevent mission#scrollModal" />
...

  scrollModal() {
    setTimeout(() => {
      document.querySelector("dialog#claim_accomplishments").scrollTop = 0;
    }, 0);
  }

<div data-controller="modal">
  <dialog id="claim_accomplishments" data-modal-target="dialog" class="p-8 rounded-lg backdrop:bg-black/60 w-3/4 h-3/4 bg-opacity-75 bg-white">
    <div class="mission-section-header-title">Step 5: Claim Accomplishments</div>
    <div>
      Lorem ipsum here...
    </div>
    <button autofocus data-action="modal#close:prevent" class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded">Close</button>
  </dialog>
  <button data-action="modal#open:prevent mission#scrollModal" class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-1 px-2.5 rounded">Open modal</button>
</div>

[excid3]

Seems like this: https://stackoverflow.com/questions/71839052/html-dialog-tag-modal-scrolling-to-bottom-on-open

[excid3]

Removing the button tag inside the dialog content does in fact correct this behavior.

You'll probably want to add a header with a Close X at the top which would get focus before the bottom close button. Or change the button to an anchor.

This isn't a bug in TSC, so I'll close this.