Zapier CLI : How do you clear the value of an input filed when dependent field changes?

Question

Im building a Zapier App using the Zapier CLI.

I have created 2 dynamic input fields, both populated from an API.

Field 2 (channelId) is dependent on the choice in field 1 (appId).

inputFields: [
 { 
    key: 'appId',
    label: 'App',
    required: true, 
    type: 'text', 
    helpText: 'Choose the App', 
    dynamic: 'app.id.display_name',
    altersDynamicFields:true,
  },
  {
    key: 'channelId',
    label: 'Channel',
    required: true,
    type: 'string',
    helpText: 'Choose the Channel',
    dynamic: 'channel.channel',
  }
]

This works fine the first time the user makes choices.

However, if they choose both options, and then change field 1 (appId) it does not clear the selection in Field 2 (channelId)

If you re open the menu, you see the new choices - so the perform function is running in the resource, but the previous selected value is not cleared - leaving an invalid selection.

How do you ensure that the dependent field is cleared when the field that alters it is changed?

Answer 1

Great question! The altersDynamicFields property is a confusingly-named one. It's tied to custom/dynamic fields, where fields are added and removed from the form dynamically. Because channelId is always present, it doesn't get recalculated when appId is changed.

As a solution, you could make channelId a custom field. It'll always be there, but it'll be properly invalidated (I think) when appId changes:

inputFields: [
 { 
    key: 'appId',
    label: 'App',
    required: true, 
    type: 'text', 
    helpText: 'Choose the App', 
    dynamic: 'app.id.display_name',
    altersDynamicFields:true,
  },
  // functions are re-run when fields with `altersDynamicFields: true` are changed
  () => [{
    key: 'channelId',
    label: 'Channel',
    required: true,
    type: 'string',
    helpText: 'Choose the Channel',
    dynamic: 'channel.channel',
  }]
]