Key Value order incorrect

Hi! We have a table where we render a key value for a particular row. The key value ordering appears very broken and inconsistent and does not seem to match the configured order.

For example say we have the order configured as:
key1
key2
key3
key4

we will observe the key value to be in an order like:
key4
key1
key2
key3

The strange part is it respects some of the order but key4 seems "stuck" at the top (for example if we flip 1 and 2 it will work). I've tried parsing out special characters and numerous other tricks with no luck. This functionality used to work until we up-versioned to 2.116 a few weeks ago (we were on about a year old verison prior to the upversion).

1 Like

Hey Rob! It does look like we have a bug here, unfortunately. I'll check in with the team to see if there's anything we can do in terms of a workaround in the meantime!

Thank you!

Seems like there aren't any workarounds at the moment, but I'll keep you posted on a fix :crossed_fingers:

Hi! Are there any news for this bug ?

Hey @sifdine, we are going to release a Key-Value component v2 where this issue is resolved. I don't have an ETA on release yet, but will update this post when I do have any additional information. Thanks!

1 Like

Is there any update on this? Key/Value is always out of order and never corresponds to configured order. This is a serious bug, as we are forced to manually enter each key/value in a separate component to get the order correctly. Huge drain on time. Interestingly, in mobile apps, the key/value does correspond to the configured order, so how is it that on the corresponding desktop component this is completely broken?

Hey @ddsgadget! Thanks for the ping here. We have released KeyValue V2 which is fully available on cloud instances and behind a feature flag on Retool v 3.20+, and should be generally available on prem very soon.

Thanks. Didn't realize there was new one. looks great!

1 Like

Not a problem at all! I was waiting to update this thread until it was fully available on premise as well, but may as well make hay while the sun shines! Thanks again for the ping, glad the new component is looking good :grin:!

Hi Joe, even with the new component the order of Saved properties still gets messed up on occasion. I can't find a way to fix it either, its extremely frustrating.

Using cloud.

@Mentioum Can you share how you have the data passed into the component. And when you say it gets messed up, do you mean that the user set order isn't persistent across app refresh etc? Any specifics you can share would be helpful to get to the bottom of it for you. Thanks

Hi @joeBumbaca ,

Happily.

The order it renders in the component in the canvas does not match the order in the inspector tab.

The data is being passed in as part of a list and is a plain object.
image

Here is an example object using our test data which represent {{item}}:

{
  "dob": "2023-10-30T00:00:00Z",
  "uid": "e19a6c77-ca57-4a88-a929-9ab65002b58d",
  "email": null,
  "title": {
    "uid": "ba434fb8-1459-4023-8640-bd202fd89311",
    "title": "Miss",
    "abi_code": 2
  },
  "claims": [
    {
      "uid": "d9b30781-01dc-4318-b77e-238fd9491e0a",
      "type": {
        "uid": "7a196539-251d-469f-921b-c69ada4a7be1",
        "claim_type": "Your vehicle was damaged as a result of a chemical leak"
      },
      "status": "SETTLED",
      "driver_id": "e19a6c77-ca57-4a88-a929-9ab65002b58d",
      "fire_cost": 9800,
      "has_theft": false,
      "liability": "NON_FAULT",
      "theft_cost": null,
      "total_cost": 39800,
      "customer_id": null,
      "settled_date": "2023-12-03T00:00:00Z",
      "incident_date": "2023-12-03T00:00:00Z",
      "reported_date": "2023-12-13T00:00:00Z",
      "has_fire_damage": true,
      "personal_injury_cost": null,
      "has_accidental_damage": true,
      "has_windscreen_damage": false,
      "vandalism_damage_cost": null,
      "accidental_damage_cost": 30000,
      "windscreen_damage_cost": null,
      "has_third_party_personal_injury": false,
      "has_third_party_property_damage": false,
      "third_party_personal_injury_cost": null,
      "third_party_property_damage_cost": null,
      "has_malicious_or_vandalism_damage": false
    }
  ],
  "gender": "FEMALE",
  "abode_type": "BOAT",
  "given_name": "Ana",
  "has_claims": true,
  "convictions": [
    {
      "uid": "500f0a18-0356-4c31-b83c-ce97afdea519",
      "type": {
        "uid": "f920937f-fbcd-45cb-adc2-c66150071000",
        "name": "Abusive Words or Behaviour"
      },
      "driver_id": "e19a6c77-ca57-4a88-a929-9ab65002b58d",
      "customer_id": null,
      "offence_date": "2023-12-03T00:00:00Z",
      "sentence_type": {
        "uid": "8ad34b26-91ed-4401-a84d-0ba9713840b6",
        "name": "Community Service"
      },
      "sentence_end_date": "2023-12-15T00:00:00Z",
      "sentence_start_date": "2023-11-26T00:00:00Z",
      "sentence_release_type": "FULL_TERM",
      "sentence_early_release_date": "2023-12-06T00:00:00Z"
    }
  ],
  "customer_id": null,
  "family_name": "Naruana",
  "disabilities": [
    {
      "uid": "2b570b02-d1cf-4734-bf15-4f52c04d2b01",
      "driver_id": "e19a6c77-ca57-4a88-a929-9ab65002b58d",
      "customer_id": null,
      "dvla_disability": "Agoraphobia",
      "disability_type_id": null,
      "has_license_restriction": true,
      "dvla_has_notified_disability": false,
      "dvla_disability_license_restriction_length": 4
    },
    {
      "uid": "3d279d51-e700-4872-96c0-95ebe09d6b68",
      "driver_id": "e19a6c77-ca57-4a88-a929-9ab65002b58d",
      "customer_id": null,
      "dvla_disability": "Central Venous Thrombosis",
      "disability_type_id": null,
      "has_license_restriction": false,
      "dvla_has_notified_disability": true,
      "dvla_disability_license_restriction_length": null
    }
  ],
  "display_name": null,
  "is_homeowner": true,
  "license_date": "2023-10-30T00:00:00Z",
  "license_type": "MEDICALLY_RESTRICTED",
  "middle_names": null,
  "relationship": "COMMON_LAW",
  "phone_primary": null,
  "custodian_cars": [
    {
      "ncd": null,
      "uid": "d6af924f-8393-4261-abe7-2e8184adb524",
      "make": "BMW",
      "doors": 4,
      "model": "Z4",
      "owner": "GRAND_PARENT",
      "seats": 4,
      "title": "2010 BMW Z4",
      "body_type": "Hatchback",
      "fuel_type": "petrol",
      "cover_type": "COMPREHENSIVE",
      "drive_side": "Left",
      "customer_id": "e581cdfc-8d1d-4a55-8863-d10085dbade0",
      "drive_train": "2WD",
      "external_id": "0x1fbe66",
      "is_imported": true,
      "is_q_plated": null,
      "class_of_use": "SOCIAL_DOMESTIC_PLEASURE_AND_COMMUTING",
      "transmission": "Automatic",
      "model_variant": null,
      "modifications": null,
      "purchase_date": "2023-10-31T00:00:00Z",
      "use_frequency": "INFREQUENT",
      "is_written_off": false,
      "engine_capacity": 2979,
      "estimated_value": 80000,
      "purchased_value": 60000,
      "manufacture_year": 2010,
      "odometer_reading": 6437,
      "voluntary_excess": null,
      "registered_keeper": "PROPOSER",
      "registration_number": "",
      "daytime_parking_info": {
        "uid": "d37425e3-465b-4ced-9448-744be8606175",
        "address": {
          "uid": "4bac0829-4f0f-44cb-8724-03414bc38d9e",
          "town": "London",
          "county": null,
          "line_1": "",
          "line_2": "",
          "line_3": null,
          "line_4": null,
          "line_5": null,
          "country": "GB",
          "postcode": ""
        },
        "location_type": "LOCKED_COMPOUND",
        "location_security": [
          "CCTV"
        ],
        "other_person_access": null,
        "inspection_frequency": null,
        "other_vehicles_present": null,
        "travels_to_home_address": null
      },
      "has_voluntary_excess": false,
      "registration_country": "United Kingdom",
      "security_device_type": null,
      "expected_annual_mileage": 7242,
      "estimated_value_currency": null,
      "eveningtime_parking_info": {
        "uid": "b1af5f84-7de7-47b9-8491-5c49fd09b264",
        "address": {
          "uid": "4bac0829-4f0f-44cb-8724-03414bc38d9e",
          "town": "London",
          "county": null,
          "line_1": "",
          "line_2": "",
          "line_3": null,
          "line_4": null,
          "line_5": null,
          "country": "GB",
          "postcode": ""
        },
        "location_type": "LOCKED_COMPOUND",
        "location_security": [
          "CCTV"
        ],
        "other_person_access": null,
        "inspection_frequency": null,
        "other_vehicles_present": null,
        "travels_to_home_address": null
      },
      "purchased_value_currency": null,
      "has_vehicle_modifications": true,
      "security_device_fitted_by": null,
      "has_security_device_fitted": false,
      "security_device_fitted_date": null,
      "is_requesting_agreed_valuation": null
    }
  ],
  "license_number": null,
  "residency_date": "2023-10-31T00:00:00Z",
  "employment_type": {
    "uid": "4a0a417a-303c-45ba-8066-447aa09c83dc",
    "abi_code": "E",
    "employment_type": "Employed"
  },
  "has_convictions": true,
  "phone_secondary": null,
  "has_disabilities": true,
  "industry_primary": {
    "uid": "f984f905-0751-4e24-a12c-5082c2d19072",
    "abi_code": 323,
    "industry_type": "Education"
  },
  "industry_secondary": {
    "uid": "eaf1601c-4bcd-4f49-ad3f-6eaba972596c",
    "abi_code": 345,
    "industry_type": "Filling Station"
  },
  "occupation_primary": {
    "uid": "102e3f9d-0017-4bde-94bc-bb9a48410947",
    "abi_code": "T03",
    "occupation": "Teacher"
  },
  "motoring_convictions": [
    {
      "uid": "79528fc5-3130-451d-ac71-24ab5ec90fb8",
      "code": {
        "uid": "8f3ad8be-36f8-4675-92a9-679ec3ba4eda",
        "code": "AC12",
        "name": "AC12 - Aiding And Abetting - AC10"
      },
      "type": {
        "uid": "6fdb7c99-36e7-4e86-b845-7eb7257814b4",
        "code": "CD",
        "name": "Careless Driving"
      },
      "driver_id": "e19a6c77-ca57-4a88-a929-9ab65002b58d",
      "customer_id": null,
      "fine_amount": 1000000,
      "offence_date": "2023-12-03T00:00:00Z",
      "points_awarded": 50,
      "conviction_date": "2023-12-03T00:00:00Z",
      "driving_ban_end_date": "2023-12-07T00:00:00Z",
      "driving_ban_start_date": "2023-12-03T00:00:00Z",
      "has_resulted_in_a_fine": true,
      "has_resulted_in_driving_ban": true,
      "has_resulted_in_penalty_points": true
    }
  ],
  "occupation_secondary": {
    "uid": "8b346ed0-d56c-43ac-9b05-29d04fa17869",
    "abi_code": "08B",
    "occupation": "Director of Environment"
  },
  "relation_to_customer": "GRAND_CHILD",
  "vehicles_owned_count": -6,
  "family_vehicles_count": 2,
  "vehicles_driven_count": 1,
  "has_regular_use_vehicle": true,
  "has_motoring_convictions": true,
  "has_occupation_secondary": true,
  "is_uk_resident_since_birth": false,
  "has_previous_special_terms_imposed": false,
  "has_previous_motor_insurance_voided": false,
  "previous_motor_terms_refused_reason": null,
  "has_previous_motor_insurance_refused": false,
  "previous_special_terms_imposed_reason": null,
  "has_previous_motor_insurance_cancelled": false,
  "previous_motor_insurance_voided_reason": null,
  "previous_motor_insurance_cancelled_reason": null
}

The inspector allows me to reorder things just fine. See image for desired order:

However this is how it renders and the items do not move around to match (some items do and some do not). See image:

Fictional data and fictional person from a test Insurance application.

I might have a guess that its the same issue as reported with the old component as it doesn't seem to happen with smaller key/value objects... (just maybe)

1 Like

Great, thanks for all that. I'm also able to repro that behavior as well. Getting this over to the team responsible for the component. Will update here as I hear back from them.

1 Like

Thank you! :slight_smile:

1 Like

@Mentioum Just as an FYI, the engineer working on the component found an issue with an underlying library that we were using that affected key-value datasets larger than 32 items. They have a fix that will be deployed this week. I'll update here when I know that it is live!

Thank you :crossed_fingers:

@Mentioum This should be released. Was able top verify with your same data above that this now works with KeyValue v2. Let me know if you see otherwise!

1 Like