[BUG]: readOnly option in PaymentElement component when using Tabs layout

[Rahmon]

What happened?

Hello,

When I add the option readOnly in the PaymentElement component, I can't click on the other options:

However, if I switch the layout to accordion, I can click on the options:

If I let the Google option open and switch the layout to tabs, this selected option keeps open:

Expected behaviour: it seems that I should be able to click on the other options when the readOnly option is set to true and I am using the tabs layout.

Code example:

import * as React from "react";
import { Elements, PaymentElement } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

export default function Home() {
  const stripePromise = loadStripe("pk_test_6pRNASCoBOKtIshFeQd4XMUh");

  const stripeElementOptions = {
    mode: "payment",
    amount: 1099,
    currency: "usd",
  };

  const options = {
    layout: "tabs", // change the layout here to accordion or tabs
    readOnly: true,
  };

  return (
    <Elements stripe={stripePromise} options={stripeElementOptions}>
      <PaymentElement options={options} />
    </Elements>
  );
}

Environment

No response

Reproduction

No response

[alexlande-stripe]

Hi @Rahmon, thanks for the report. I've verified this is not working as intended (although I think the intended behavior is that accordion layout will also not allow you to change payment methods).

We're tracking this issue internally and will update here when a fix is rolled out.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[alexlande-stripe]

Quick update, we've rolled out a fix for this and readOnly should now behave the same way for both tabs and accordion layouts.