Table OptionField/AutocompleteField duplicates & not showing value

I implemented a Table with three columns: two AutocompleteFields (Naam dwarsprofiel & Naam boring/sondering) and a TextField (Zone). See the images below.

This Table shows the following unexpected behavior:

  1. Missing value: I use SetParams to fill the two AutocompleteFields. It works fine, but for some fields in the “Naam boring/sondering” column it shows a blank value (see Image 1). When I click on the drop-down, it shows that a value in fact is selected (see Image 2). This is confirmed by exporting the data to an Excel, which contains the correct data.
    This is the only column that shows this behavior, even though the “Naam dwarsprofiel” is also a AutocompleteField that is filled using the SetParams.
  2. Duplicated values: If I click on the drop-down, close it by clicking somewhere else, and open it again, the selected value is duplicated (see Image 3). This process repeats every time I close and then open the drop-down, resulting in a long list of duplicates which are all selected.

I also tried using OptionField instead of AutocompleteField to check if this is an issue only related to AutocompleteField, but it behaves the same.

Image 1: results of SetParams:

Image 2: the drop-down indicates a selected value, but it’s not shown in the table cell

Image 3: after clicking again on the drop-down a duplicate value is added.

Hi Martijn,

Thank you for bringing this to our attention. When looking through your explanation, my first guess would be that this is a complicated bug in the FrontEnd part of our platform. Especially since the excel export shows it correctly filled in.

Just to double-check this: could you check that after the SetParams Button is clicked, the params that are being used in the next app-call is correctly filled in. It is probably easiest to:

  1. in any View/Button method, add a print statement at the start, printing the params
  2. run your SetParams function to make sure the new params are set
  3. trigger the View/Button method to print the params
  4. check the printed params, to make sure that the 2nd entry in the table contains the correct data

If the printed params are what you expect them to be, it is very likely a bug in the rendering of data in the table. Then I’ll register this as a bug report and we’ll pick this up internally.

Some questions so we can try to reproduce this ourselves:

  • Which browser are you using?
  • Would you be willing to share the value-label pairs that you are using to fill the Autocomplete options?

Hi Kevin,

The printed params are like I would expect them to be (the same as the Excel exports). I tried the app with three browsers (Chrome, Firefox and Edge) and all three show the same problems (both the missing value and the duplicates).

It’s no problem to share the data with you as it’s for testing purposes anyways. Do you just need the DataFrame and the data it contains or do you also need more info on the SetParams function etc.? If you need to deep dive into the code to figure out what’s going wrong it’s also fine to schedule a video call to look at the code together.

Hi Martijn,

Given the fact that the params are what you expect them to be, I’m confident that this is a rendering bug in the FrontEnd of the platform. (I’ll therefore re-categorize this topic under the ‘Bug Reports’ category.)

With regards to the sharing of data: I think that the only data we need is how you construct your OptionListElement(value=xx, label=yy) for the AutoCompleteField(.., options=zz).

  • Is this a list of hard-coded `OptionListElement’ objects? Or are you using a callback function like specified here?
  • What are you filling in for value=xx, label=yy?

Hi Kevin,

Sorry for the late reply. The column in the table that gives an error contains AutocompleteFields, which get their options from a callback function “from_uploaded_boringen_sonderingen_get_names”. In this function, the values are obtained from a GeoDataFrame that is stored in a HiddenField. After this, the function reads some data from the GeoDataFrame in the HiddenField and returns it as a list.

I copied the relevant code below. The column is called "boring_sondering_name and is located in the step "boringen_sonderingen, section "allocation, table "main_table. The GeoDataFrame looks something like this:

| dwarsprofiel | name            |
|--------------|-----------------|
| 51           | DP51+050_HB_BUT |
| 52           | DP52+047_HB_AL  |
def from_uploaded_boringen_sonderingen_get_names(params, **kwargs):
    try:
        if params.step_boringen_sonderingen.allocation.hidden_gdf_boringen_sonderingen is None:
            params.step_boringen_sonderingen.allocation.hidden_gdf_boringen_sonderingen = (
                _process_shapefile(params.step_upload_shapefiles.boringen_sonderingen)
            )
        return (
            params.step_boringen_sonderingen.allocation.hidden_gdf_boringen_sonderingen["name"]
            .unique()
            .tolist()
        )
    except AttributeError:
        # If no boringen/sonderingen shapefile has been selected yet
        return []

step_boringen_sonderingen.allocation.main_table.boring_sondering_name = AutocompleteField(
    "Naam boring/sondering",
    options=from_uploaded_boringen_sonderingen_get_names,
)

Hi Martijn,

Could you inspect / share the format of the json stored on params.step_boringen_sonderingen.allocation.hidden_gdf_boringen_sonderingen?

Hi Kevin,

I found the source of the issue. The JSON looks like this:

{"type": "FeatureCollection", "features": [{"id": "0", "type": "Feature", "properties": {"name": "midden_werkt_SO_36-2_A174+065_BuTa_000"}, "geometry": {"type": "Point", "coordinates": [129661.22, 443400.46]}}, {"id": "1", "type": "Feature", "properties": {"name": "oost_werkt_SO_36-2_A174+065_BiTa_000 "}, "geometry": {"type": "Point", "coordinates": [129739.76, 443387.56]}}]}

As you can see, the name of the second geometry ends with a space ("oost_werkt_SO_36-2_A174+065_BiTa_000 "). After removing this space, the table shows the data as expected. This also solves the issue of the duplicated values when clicking the drop-down menu several times