React 18 CardElement visibility hidden

[laviniu-creatopy]

Describe the bug

When using react@18 the input for the card element stays with visibility: hidden, the date and CVV fields are working

To Reproduce

Use the library with react@18 and demo code from https://github.com/recurly/react-recurly/blob/main/demo/src/card-element-demo.js

Expected behavior

to let me type the card number :)

Your Environment

• Which version of react-recurly are you using?
  1.2.4
• Which version of react are you using?
  18.2.0
• Which browser (+version) are you using?
  Google Chrome Version 104.0.5112.101

[PabloSuarez]

same issue

[ridersofrohan]

@douglasmiller any update on this?

[douglasmiller]

@laviniu-creatopy, @PabloSuarez, @ridersofrohan:

I created this codesandbox with the demo code from the repository and everything appears to be working for me. Are y'all seeing a different behavior? If so, could one of y'all provide a codesandbox so that we can reproduce the issues that you're experiencing?

[chrissrogers]

Thinking this may be related to #182 and use of React.StrictMode

[PabloSuarez]

@douglasmiller it works on JS but fail with typescript, I can't create the sandbox now but I'll

[Smolations]

Actually, I was able to repro this issue in the sandbox. The issue occurs with a combination of using <React.StrictMode> and the new react-dom rendering syntax:

import React from "react";
import { createRoot/*, render*/ } from "react-dom";

// ...

function App() {
  return (
    <div>
      <React.StrictMode>
        {/* ... */}
      </React.StrictMode>
    </div>
  );
}

// render(<App />, document.querySelector(".App"));

const root = createRoot(document.querySelector(".App"));
root.render(<App />);

[douglasmiller]

@PabloSuarez, I was able to reproduce your issue with the strict mode changes that @Smolations suggested in this codesandbox. The issue persists if @recurly/react-recurly version 1.2.4 is used and fixed if 1.2.6 (just released today) is used.

Could you verify that the latest version of this package is working for you as well?

[chrissrogers]

Thanks to this excellent contrib from @WillXing.