Phone field value is cleared programmatically, but not reflected in UI

[svirchenko]

When using HubSpotFormsV4, calling form.setFieldValue() on the phone field clears the value in the form state, but the UI still displays the old value (the phone number remains visible in the input).

1. Enter phone number manually in the embedded HubSpot form (e.g. +34232131231)

2. Get the form instance:

const form = HubSpotFormsV4.getForms()[0];

3. Check current field value:

await form.getFormFieldValues();
// => [{ name: '0-1/phone', value: '+34232131231' }]

4. Try to clear the field:

form.setFieldValue("0-1/phone", ""); 
// or 
form.setFieldValue("0-1/phone", null);

5. Check form field values again:

await form.getFormFieldValues();
// => [{ name: '0-1/phone', value: '' }]

The internal value is cleared, but UI still shows:

[ASam26]

I ran into the same thing with the phone input when working with HubSpotFormsV4. The short version: setting the value to “” or null does update the internal state, but the UI won’t visually clear unless the phone input field is re-rendered, and HubSpot doesn’t force a rerender when setFieldValue is used with empty values on this particular field type.

What worked for us was triggering a small DOM change manually. After setFieldValue, try also resetting the input directly via JavaScript, something like:

const phoneInput = document.querySelector(“input[name=‘0-1/phone’]”);
if (phoneInput) phoneInput.value = “”;

It keeps UI and state in sync. Just make sure this runs after the field value update to avoid race conditions

[svirchenko]

Hi @ASam26 ,

Thanks a lot for the suggestion — I can confirm that works well on regular forms!

Unfortunately, in my case I’m dealing with an embedded HubSpot form, which is injected into the DOM via an <iframe src=…>. Because of that, I can’t access the internal document or query its elements with document.querySelector, due to cross-origin restrictions.

So even though form.setFieldValue(“0-1/phone”, “”) clears the internal state, there’s no way for me to sync the UI manually from the outside. I guess what’s really needed is for HubSpot to trigger a re-render or update the phone input directly when clearing the value through the API.

Still appreciate your input though — it helped clarify the root cause!