- Change Tilled environment variables in ./env/.env.development
- Run the following commands
npm i;
npm start;
- Visit the localhost url
- Click [Add Payment Button]
- Toggle between Card & Bank
Reproduction steps
- Click [Add Payment Button]
- Open web inspect on the first input, notice how 2 card number fields are rendered
- Click [Bank]
- Open web inspect on the first input, notice how 2 bank account number fields are rendered
React strict mode is turned off in the example you've provided. What this does is run React useEffect hooks twice to ensure our components are cleaning up properly. The Tilled.js library does not have any cleanup functionality that we can interface with to cleanup whatever TilledJS has done to the DOM.
In ./src/components/AchBankFields.tsx and ./src/components/CardFields.tsx, the React.useEffect returns a function to run any cleanup you may recommend. When the dialog is rendered, we see duplicate form fields. What would you recommend here?
We would rather not turn off strict mode in our application.
reproduction-steps.mp4
Reproduction steps
- Click [Add Payment Button]
- Open web inspect on the first input, notice how 2 card number fields are rendered
- Click [Bank]
- Click [Card]
- Open web inspect on the first input, notice how 4 card number fields are rendered
- Click [Bank]
- Click [Card]
- Open web inspect on the first input, notice how 6 card number fields are rendered
Toggling between card/bank in dialog multiple times is attaching form fields repeatedly to the selectors without first cleaning up the DOM. I create new Tilled/Form instances as recommended. What would you recommend here? Why is TilledJS keep rendering duplicate fields?