jaypark

[sand sequoia]

What happens when you do this?

Using addressElement.clear() works as expected for me, so sharing a bit more detail about the way in which this fails would help us advise you

[versed sand]

I have <Elements> at the root, and some of the child modals are rendering <AddressComponent>. When sending an invoice, if they are a new user, we are registering a new address. After successful submission, element.clear() is called, and when we open the modal again to enter other user information, the previously submitted information is loaded. that is a problem.

[sand sequoia]

I'm not sure what you mean by AddressCOmponents -- there's only a single AddressElement as far as I know. Are you sure the element is pointing to the address element?
You can try retrieving it before clearing to be certain: const addressElement = elements.getElement('address');

[versed sand]

That was typo
import { AddressElement } from '@stripe/react-stripe-js';

I tried like below

const addressElement = elements?.getElement(AddressElement);
    if (addressElement) {
        addressElement.clear();
    }

Should I use getElement('address') instead of getElement(AddressElement)?

[sand sequoia]

Yes I'm not sure getElement(AddressElement) would do anything

Do you find element has a value if you do that?

[versed sand]

Yes I verified it is object which has cancel function from console log. And It was called. But element still loads previous submitted data

[sand sequoia]

Did anything change when changing to the alternate get element approach?

If youre conditionally showing this in a modal and want it reset, have you tried to unmount or destroy the element, then re-create & re-mount when the modal is re-shown?

[versed sand]

Nope

const [event, setEvent] = useState<
StripeAddressElementChangeEvent | Pick<StripeAddressElementChangeEvent, 'complete' | 'value'>

(INITIAL_EVENT_STATE);

function submit() {
mutate({
onSettled: () => {
setEvent(INITIAL_EVENT_STATE);
const addressElement = elements?.getElement(AddressElement);
if (addressElement) {
addressElement.clear();
}
}
})
}

<AddressElement options={{ mode: 'billing' }} onChange={setEvent} onReady={() => setIsLoading(false)} />

Should I re-create or re-mount manually?

[sand sequoia]

If it's not working as you expect in your integration with clear then that's what I'd suggest next.

Note that with React, you should be able to force the AddressElement to unmount to have the react package manage the recreation for you

[versed sand]

I think because it is modal. When I try to clear it, modal is already closed.

Is there way to clear element even if element is not showing ?

[sand sequoia]

I'm not sure about that, but if you can recreate this with a minimal reproduction it you be great to write in to support with that for us to investigate: https://support.stripe.com/contact

But i would suggest trying to force React to unmount the AddressElement and see if that helps to reset it when remounted