Input Field Values Are Lost When Toggling Dropdown Selections

Discussions
1

When options in a dropdown (such as selecting certain columns) are toggled, any associated input fields that are dynamically rendered by the server lose their stored values. This happens even though the values should persist when the associated options are toggled. Users may not realize that their entered values were cleared until they interact with other parts of the interface or revisit the input fields later.

Steps to Reproduce:

  1. Open the page with the dropdown menu that triggers dynamic input fields based on selection.
  2. Select certain options that render input fields (such as textboxes, date pickers, etc.) via a server response.
  3. Enter values into these input fields.
  4. Deselect or select additional options.
  5. The dynamically rendered input fields lose all previously entered values without any warning.
  6. The user will only realize the loss of input data when they navigate away from the dropdown or revisit the input fields.

Expected Behavior:

  • The input fields rendered by the server should retain their entered values when the user toggles the dropdown options.
  • Changing the selection of options should not reset or clear values entered into the dynamically rendered input fields.
  • Users should be able to modify selections without losing previously entered input values.

Actual Behavior:

  • When toggling the selection of options, input fields rendered from the server lose all stored values.
  • The UI does not indicate that the values were cleared, leaving the user unaware until they return to the fields.
dropdownComponent: ( required = false, mode, type, description ) => Dropdown({ displayName: 'Select Options', description: description, required: required, options: async ({ id }, anotherParam) => { const response = await fetchOptionsFromServer(id, anotherParam);if (!response)
    return {
      disabled: true,
      placeholder: 'No data available',
      options: [],
    };

  const options = response.map(option => ({
    label: option.name,
    value: option.id,
  }));

  return {
    disabled: false,
    options: options,
  };
},
}),

// Example of input field rendering based on selection inputFields: ({ selectedOptions }) => { // Dynamically render input fields based on selected options if (selectedOptions.includes('columnA')) { return <input type="text" value={storedValueA} onChange={handleChangeA} />; }

if (selectedOptions.includes('columnB')) { return <input type="text" value={storedValueB} onChange={handleChangeB} />; }

return null; },