formio / react

JSON powered forms for React.js
https://form.io
MIT License
300 stars 268 forks source link

Address field does not pre-fill when passing data into submission object #561

Closed alexknipfer closed 2 months ago

alexknipfer commented 2 months ago

Describe the bug Passing an address to the submission object does not pre-fill a address component field.

I'm trying to pre populate an address field by passing an address into the submission object. I've tried passing it as a string and also tried passing the individual fields of a address component as follows:

// as a string
submission={{
  data: {
    address: '123 Address, Chicago, IL 60007'
  },
}}
// also tried the following
submission={{
  data: {
        address: {
          address1: 'Test',
          address2: '',
          city: 'Chicago',
          state: 'IL',
          zip: '60007',
        },
  },
}}

Expected behavior I would expect to be able to pass this into the submission object and the value be set on the input.

Screenshots This is my address field that is remaining blank after passing data into the submission object:

Screenshot 2024-04-11 at 4 20 19 PM

If there is anything else I can provide to clarify the issue please let me know!

lane-formio commented 2 months ago

What provider are you using?

Here's what I have done to reproduce your scenario...

  1. Add Address Component with provider: OpenStreetMap Nominatum
  2. Post submission via API using postman with the following json object
    {
    "data": {
        "address": "123 Address, Chicago, IL 60007"
    }
    }

    Result Submission view shows up empty, but the data is still available in the submission object itself: image

Here's what I did to get it to successfully display:

  1. Add Address Component with provider: OpenStreetMap Nominatum
  2. Create a dummy submission via UI to capture the submission object expected by the provider.
  3. Post submission via API using postman with the following json object
{
    "data": {
        "address": {
            "place_id": 25871661,
            "licence": "Data © OpenStreetMap contributors, ODbL 1.0. http://osm.org/copyright",
            "osm_type": "way",
            "osm_id": 210815525,
            "lat": "41.72382345",
            "lon": "-87.60908342557869",
            "class": "building",
            "type": "yes",
            "place_rank": 30,
            "importance": 0.00000999999999995449,
            "addresstype": "building",
            "name": "",
            "display_name": "9361, South Saint Lawrence Avenue, Roseland, Chicago, Hyde Park Township, Cook County, Illinois, 60619, United States",
            "address": {
            "house_number": "9361",
            "road": "South Saint Lawrence Avenue",
            "quarter": "Roseland",
            "city": "Chicago",
            "municipality": "Hyde Park Township",
            "county": "Cook County",
            "state": "Illinois",
            "ISO3166-2-lvl4": "US-IL",
            "postcode": "60619",
            "country": "United States",
            "country_code": "us"
            },
            "boundingbox": [
            "41.7237891",
            "41.7238579",
            "-87.6091811",
            "-87.6089858"
            ]
        }
    }
}

Posting that worked.

Then after some further tinkering I found this worked as well:

{
    "data": {
        "address": {
            "display_name": "9361, South Saint Lawrence Avenue, Roseland, Chicago, Hyde Park Township, Cook County, Illinois, 60619, United States"
        }
    }
}

image

Granted, I performed this using our portal and not in a react app.

alexknipfer commented 2 months ago

@lane-formio Appreciate the detailed response! I wasn't aware we could pass in only the display_name, but that worked. Is there documentation somewhere that says what each of these form components (such as Adddress Component, etc) expect as the submission object, it wasn't clear the entire provider object OR only the display_name was required? Our team is new to the formio ecosystem, so apologies if I missed it.

I'm going to go ahead and close this out, thank you!

lane-formio commented 2 months ago

Our commercial offering does have inline documentation available via the "API Explorer" but the address component is certainly a little unique in that regard as the submission object varies between providers.