I have been tasked with creating a custom search widget for a client inside Experience Builder. This widget will have to search multiple data sources simultanenously, and moreover, search multiple fields within each data source, then spit out an autocomplete/typeahead list a user can select from.
In order to make this as easy to configure as possible for our users, I am using the DataSourceSelector widget in settings, and using the FieldSelector widget to let them select what fields for which data source the widget should search. However, I'm running into a UI issue, where after I click on the dropdown for the data sources, and select a different one, the name in the dropdown does not update, and it only shows the fields (including selected ones) from the first data source. Weirdly, though, if I hit "save" (just for a test), it actually takes the selected fields for the first data source and applies them to the other data source I selected (but which doesn't appear in the UI.)
Below is the code I am using to put the FieldSelector into the settings panel. I am not sure if I am using it incorrectly -- the documentation for this widget is essentially non-existent, and the Storybook page is incomplete. My understanding is that the FieldSelector can handle multiple data sources at once, but am I using the right properties -- correctly -- to make that work? Should I be using one Field Selector widget per data source?
<SettingSection key="data">
<SettingRow><h4>Data Source</h4></SettingRow>
<SettingRow>
<DataSourceSelector
isMultiple
mustUseDataSource
types={supportedTypes}
onChange={onDataSourceChange}
useDataSources={props.useDataSources}
widgetId={props.id} />
</SettingRow>
<SettingRow><h6>Search Fields</h6></SettingRow>
<SettingRow>
<FieldSelector
isMultiple={true}
useDropdown={true}
useMultiDropdownBottomTools={true}
useDataSources={props.useDataSources}
onChange={onSearchFieldsChange}
widgetId={props.id}
selectedFields={props.config.fields || Immutable([])}
/>
</SettingRow>
</SettingSection>
