How do you clear the value of input filed when dependent field changes?

Hey @ikbelkirasan @Troy Tessalone or @AndrewJDavison_Luhhu would any of you by any chance be able to help out here? Thanks!

It seems that this is a design limitation of Zapier. I looked at a few of the robust  existing Apps, like the one for Google Sheets, and found that they work the same way (i.e. they did not find a solution).

The workaround I’ve come up with is to use a wrapper function to make the entire set of input fields dynamic, coupled with the altersDynamicFields property on fields with dependencies.

Basically, I only create a field while its immediate child has not yet been set. So if I have two fields, where the first is a dependency of the second:

• While there is no value set for the first field I only create that field
• When the value for the first field is set, I always create the second field (in this case that field)
• When the value for the second field is set, I stop generating the first field

This logic can be extended for as many nested direct-dependency relationships as you want.

Unfortunately the user experience with this approach is janky for the following reasons:

• There is a delay between setting a field and the UI changing to reflect which fields are now being shown, and there is no animation for the change. So for the user the new fields suddenly appear and the old ones suddenly disappear, all after a significant lag time. Definitely confusing without training or verbose help text.
• Zapier adds a UI section called “Extra Fields” if you stop generating a field that still has a value stored in inputData, and allows the user to clear those fields. So if you need all of the fields to exist and for dependencies to exactly match, a user can very easily mess that up.

Has anyone found a way to do this without creating bad UX?

A programmatic workaround I made, to avoid having outdated value in the conditional field.
With this solution, the old field remains in the additional fields section.
I don't care because I'm handling the correct field based on the dynamic field key in the perform function.

inputFields: [
  {
    key: 'appId',
    label: 'App',
    required: true,
    type: 'text',
    helpText: 'Choose the App',
    dynamic: 'app.id.display_name',
    altersDynamicFields: true,
  },
  function (z, bundle) {
    if (bundle.inputData.appId && bundle.inputData.appId !== '') {
      return [{
        key: `${bundle.inputData.appId}-channelId`,
        label: 'Channel',
        required: true,
        type: 'string',
        helpText: 'Choose the Channel',
        dynamic: 'channel.channel',
      }];
    }
    return [];
  },
]