Company field text not populating when reachforce dropdown value is selected

contacts

#1

Hi Community,

here’s my page: https://info.bitsighttech.com/poc-reachforce I am working on a POC and i’ve used reachforce smartforms dropdown appended to company field. The issue that I am seeing is that when I start typing the company name in the company field, I see the reachforce smartforms dropdown and when I select one of the companies from the dropdown, the company field value is set to the value of the dropdown. But…when I focus out of the company field or submit the form, the reachforce dropdown value is not being set.

This scenario goes same for any field and for other custom dropdowns such as google’s autocomplete API. The extact value from these dropdowns is not being set in the hubspot fields. I did some inspecting in the browsers and found that if I remove the attribute called “data-react” from a hubspot field, where such custom dropdown implementations has been done, and focus out of the field, the value selected from the dropdown sets perfectly into the text field. But then, it would throw an error while submitting the form and the form won’t submit as this attribute is added by react js library of hubspot.

If anyone out there could look into this issue and suggest some alternative solution that would be awesome. I’ve already spent enough hours trying to understand this issue. Please reply me back if you guys have any insight on this.

Thanks,
Sid


#2

Hi @Siddharth_Shukla

HubSpot forms are built using React, so if you’re using JavaScript to update the fields you’ll need to manually trigger the change event on the field to update the stored value.


#3

@dadams Thanks for the quick response. Really appreciate it :slight_smile: . I’ll try to update the code to trigger a ‘change’ event. Will check back with you with results or errors. Hope you would help me sort this out.

Thanks,
Sid


#4

@dadams See this sample page: https://info.bitsighttech.com/reachforce-ty-poc

I’m appending the google maps api autocomplete and when I select the address data from autocomplete dropdown and click on some other field, the correct value from the dropdown does not set. I’ve triggered change event after “trigger(‘geocode’);” in js file: https://www.grazitti.com/bitsight/bitsighttech-geocomplete.js, I even have the following code as per the guidelines given here: https://www.grazitti.com/bitsight/bitsighttech-geocomplete.js

But even on complete load of the page, the value in the field “firstname” is not setting at all. I just cannot figure out why a simple jquery function wont work, especially for the hubspot forms. I’m just stuck in here and cannot proceed forward to work on this. Please review this page and let me know whether there is actually some bugs in the hubspot forms api.

Thanks,
Sid