Scrolling fires before it gets disabled when button is clicked

Question

I have the next issue with Chat GPT. Let's say I start a new chat for Chat GPT, where i ask this, having a really long text:

Since this is the first prompt, it's also the first edit button, which can be accessed like this:

document.querySelectorAll("button.p-1.rounded-md.text-token-text-tertiary")[0]

Now, when I click this edit button, it automatically scrolls back to the start of the text, part of the first textarea generated upon clicking the edit button. This is the element that gets scrolled:

Array.from(document.querySelectorAll('div')).find(div => /^react-scroll-to-bottom--css-\S+$/.test(div.className))

as seen here:

What I'm looking for is to disable this automatic scrolling for the edit button.

As a test, I tried this code that disables scrolling for 5 seconds for that scrollable element every time the edit button is clicked, but, unfortunately, scrolling occurs before it gets disabled:

document.addEventListener('click', function(event) {  
  if (event.target.closest("button.p-1.rounded-md.text-token-text-tertiary")) {
    
    const scrollableContainer = Array.from(document.querySelectorAll('div')).find(div => /^react-scroll-to-bottom--css-\S+$/.test(div.className));
    
    if (scrollableContainer) {
      scrollableContainer.style.overflow = 'hidden';
      setTimeout(() => {
        scrollableContainer.style.overflow = ''; 
      }, 5000); 
    }
  }
});

My final goal is to be able to edit very long prompts, that go beyond what's seen on the screen, at any place in the prompt, without having the scroll jump at the start of the prompt whenever I hit Alt + Enter, which clicks the edit button.

In the example below you can see that every time I hit Alt + Enter the first edit button is clicked.

document.addEventListener('keydown', function (event) {
  if (event.altKey && event.key == "Enter") {
    console.log("Enter key pressed");
    event.preventDefault();
    document.querySelectorAll("button.p-1.rounded-md.text-token-text-tertiary")[0].click();
    event.stopPropagation();
  }
}, true);

I somewhat have managed to solve this issue by saving the current position of the scroll when Alt + Enter is hit, and then really quickly recalling that position, but it just makes the screen flicker due to the really fast transition from the start of the prompt to the previous scroll position. The flicker happens only on Chrome and Firefox, but not on Edge, as far as I have tested.

Here is the code:

document.addEventListener('keydown', function (event) {
  if (event.altKey && event.key == "Enter") {
    const scrollableContainer = Array.from(document.querySelectorAll('div')).find(div => /^react-scroll-to-bottom--css-\S+$/.test(div.className));
    const scrollPosition = scrollableContainer.scrollTop;
    const button = document.querySelectorAll("button.p-1.rounded-md.text-token-text-tertiary")[0];
    if (button) {
      button.click();

      setTimeout(() => {
        scrollableContainer.scroll({
          top: scrollPosition,
          behavior: 'instant'
        });
      }, 0);
    }

    event.stopPropagation();
  }
}, true);

One additional piece of info, if I add a scroll event listener breakpoint, and I click the first edit button, in the call stack, the scroll event shows up as scroll (async), as seen here:

Since I'm not happy with the solution that I have found, do you have any suggestions?