Custom Experience Builder widget dropdown value will not populate

[wjenkins]

I am working on a custom widget and we are using the a configuration file to feed in additional parameters to the initialized widget. When we are setting up the widget for a new app we have a list of drop downs that we are using to set the parameters for the widget, but when we select the item from the drop down the value is not displaying.

We are using `UseDataSource` in the drop down menus for the map and the layer that we are connecting to, but we use config to set key value pairs for custom values that we are passing to the widget. When I looked into the feature-layer-class widget example  the `FieldSelector` components are setting a key called fields on `UseDataSources` that has a type of an array of string, but we have a lot of fields and would rather have an object associated with these to access keys.

I have looked at the `jimu-ui` docs for `FieldSelector` but it is not list and looked into the `Dropdown` in Reactstrap, but I am not able to make heads or tails of it.

Is there something that I am doing wrong to populate these fields, is there documentation that I am missing out on.

It would be helpful if we had a `value` prop to the `FieldSelector` drop down to set a custom value from a config object.

/** @jsx */
import { React, jsx, Immutable, DataSourceTypes, UseDataSource } from 'jimu-core';
import { AllWidgetSettingProps } from 'jimu-for-builder';
import { IMConfig } from '../config';
import {
  JimuMapViewSelector,
  SettingSection,
  SettingRow,
} from 'jimu-ui/advanced/setting-components';
import {
  AllDataSourceTypes,
  DataSourceSelector,
  FieldSelector,
} from 'jimu-ui/advanced/data-source-selector';

export class Setting extends React.PureComponent<AllWidgetSettingProps<IMConfig>, any> {
  supportedTypes = Immutable([DataSourceTypes.FeatureLayer]);
  onMapWidgetSelected = (useMapWidgetIds: string[]) => {
    this.props.onSettingChange({
      id: this.props.id,
      useMapWidgetIds: useMapWidgetIds,
      config: this.props.config.set('layerId', useMapWidgetIds[0]),
    });
  };

  onDataSourceChange = (useDataSources: UseDataSource[]) => {
    this.props.onSettingChange({
      id: this.props.id,
      useDataSources: useDataSources,
    });
  };

  setPropertyFieldName = (fieldProperty, fieldName) => {
    this.props.onSettingChange({
      id: this.props.id,
      config: this.props.config.set(fieldProperty, fieldName),
    });
    console.log(this.props.config);
  };

  onToggleUseDataEnabled = (args) => {
    console.log({ args });
  };

  render() {
    return (
      <div>
        <div className='widget-setting-br-buffer-tool'>
          <SettingSection className='map-selector-section' title='Select Map'>
            <SettingRow>
              <JimuMapViewSelector
                onSelect={this.onMapWidgetSelected}
                useMapWidgetIds={this.props.useMapWidgetIds}
              />
            </SettingRow>
          </SettingSection>
          <SettingSection className='map-selector-section' title='Select Parcel Layer'>
            <SettingRow>
              <DataSourceSelector
                mustUseDataSource
                types={Immutable([AllDataSourceTypes.FeatureLayer])}
                useDataSources={this.props.useDataSources}
                onChange={this.onDataSourceChange}
                widgetId={this.props.id}
              />
            </SettingRow>
          </SettingSection>
          {this.props.useDataSources && this.props.useDataSources.length > 0 && (
            <React.Fragment>
              <SettingSection className='map-selector-section' title='OID field'>
                <FieldSelector
                  useDataSources={this.props.useDataSources}
                  isMultiple={false}
                  isDataSourceDropDownHidden={true}
                  isSearchInputHidden={false}
                  useDropdown={true}
                  placeholder={'Select OID field'}
                  useDefault={false}
                  onChange={(evt) => this.setPropertyFieldName('oidField', evt[0].name)}
                />
              </SettingSection>
              <SettingSection className='map-selector-section' title='PIN field'>
                <FieldSelector
                  useDataSources={this.props.useDataSources}
                  isMultiple={false}
                  isDataSourceDropDownHidden={true}
                  isSearchInputHidden={false}
                  useDropdown={true}
                  placeholder={'Select PIN field'}
                  useDefault={false}
                  onChange={(evt) => this.setPropertyFieldName('pinField', evt[0].name)}
                />
              </SettingSection>
              <SettingSection className='map-selector-section' title='Owner field'>
                <FieldSelector
                  useDataSources={this.props.useDataSources}
                  isMultiple={false}
                  isDataSourceDropDownHidden={true}
                  isSearchInputHidden={false}
                  useDropdown={true}
                  placeholder={'Select Owner field'}
                  useDefault={false}
                  onChange={(evt) => this.setPropertyFieldName('ownerField', evt[0].name)}
                />
              </SettingSection>
              <SettingSection className='map-selector-section' title='Street # field'>
                <FieldSelector
                  useDataSources={this.props.useDataSources}
                  isMultiple={false}
                  isDataSourceDropDownHidden={true}
                  isSearchInputHidden={false}
                  useDropdown={true}
                  placeholder={'Select Street# field'}
                  useDefault={false}
                  onChange={(evt) => this.setPropertyFieldName('streetNberField', evt[0].name)}
                />
              </SettingSection>
              <SettingSection className='map-selector-section' title='Street name field'>
                <FieldSelector
                  useDataSources={this.props.useDataSources}
                  isMultiple={false}
                  isDataSourceDropDownHidden={true}
                  isSearchInputHidden={false}
                  useDropdown={true}
                  placeholder={'Select Street name field'}
                  useDefault={false}
                  onChange={(evt) => this.setPropertyFieldName('streetNameField', evt[0].name)}
                />
              </SettingSection>
              <SettingSection className='map-selector-section' title='Street type field'>
                <FieldSelector
                  useDataSources={this.props.useDataSources}
                  isMultiple={false}
                  isDataSourceDropDownHidden={true}
                  isSearchInputHidden={false}
                  useDropdown={true}
                  placeholder={'Select Street suffix field'}
                  useDefault={false}
                  onChange={(evt) => this.setPropertyFieldName('streetSuffixField', evt[0].name)}
                />
              </SettingSection>
              <SettingSection className='map-selector-section' title='City field'>
                <FieldSelector
                  useDataSources={this.props.useDataSources}
                  isMultiple={false}
                  isDataSourceDropDownHidden={true}
                  isSearchInputHidden={false}
                  useDropdown={true}
                  placeholder={'Select city field'}
                  useDefault={false}
                  onChange={(evt) => this.setPropertyFieldName('cityField', evt[0].name)}
                />
              </SettingSection>
              <SettingSection className='map-selector-section' title='State field'>
                <FieldSelector
                  useDataSources={this.props.useDataSources}
                  isMultiple={false}
                  isDataSourceDropDownHidden={true}
                  isSearchInputHidden={false}
                  useDropdown={true}
                  placeholder={'Select state field'}
                  useDefault={false}
                  onChange={(evt) => this.setPropertyFieldName('stateField', evt[0].name)}
                />
              </SettingSection>
              <SettingSection className='map-selector-section' title='Zip Code field'>
                <FieldSelector
                  useDataSources={this.props.useDataSources}
                  isMultiple={false}
                  isDataSourceDropDownHidden={true}
                  isSearchInputHidden={false}
                  useDropdown={true}
                  placeholder={'Select zipcode field'}
                  useDefault={false}
                  onChange={(evt) => this.setPropertyFieldName('zipCodeField', evt[0].name)}
                />
              </SettingSection>
            </React.Fragment>
          )}
        </div>
      </div>
    );
  }
}

export default Setting;