[Bug]: PPOM scrolling down function with incorrect behaviour in See details

[seaona]

Describe the bug

Problem: whenever a transaction is flagged as malicious, we see an incorrect scrolling behaviour in the following ways:

• when I click See details for the first time -- no scroll happens
• when I double click any text from the details -- it scrolls me down everytime
• when I click See details again (for hiding them) and then click See details again to show them -- scrolls me down

https://github.com/MetaMask/metamask-extension/assets/54408225/3706ca24-fecd-4536-9497-790983bb0e4b

Expected behavior

Proposal, not 100% sure to expect though:

• anytime click See details for revealing them, should auto scroll you down?
• double clicking the text, should not scroll you down?

OR:

• never auto scroll down

cc @bschorchit

Screenshots

No response

Steps to reproduce

1. Select mainnet
2. Trigger a malicious signature from the test dapp
3. Click See details -- see no auto scroll happens
4. Double click details text -- see auto scroll happens
5. Click Hide details and See details again -- see now auto scroll happens

Error messages or log output

No response

Version

develop

Build type

None

Browser

Chrome

Operating system

Linux

Hardware wallet

No response

Additional context

No response

Severity

No response

[bschorchit]

I believe expected behavior would be to never scroll down cc: @SayaGT

[SayaGT]

yup agree with @bschorchit. it shouldn't scroll.

[digiwand]

Hey team! Please add your planning poker estimate with Zenhub @blackdevelopa @digiwand @jpuri @seaona @segun

[digiwand]

This behavior was inherited from the Disclosure component. The following code has been around for 2 years. See PR which introduces this

ui/components/ui/disclosure/disclosure.js:

  const disclosureFooterEl = useRef(null);
  const [open, setOpen] = useState(false);

  const scrollToBottom = () => {
    disclosureFooterEl &&
      disclosureFooterEl.current &&
      disclosureFooterEl.current.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    if (open) {
      scrollToBottom();
    }
  }, [open]);

The only other instance of <Disclosure> is in ui/components/app/transaction-list-item-details/transaction-list-item-details.component.jswhere "Activity log" uses the component.

My recommendation would be to update Disclosure to default to not "scrollToBottom" and pass the new property to the instance in transaction-list-item-details.component.js