ESRI Search Widget activeSourceIndex Usage (ArcGIS JS v4.8)

Question

I am new to ArcGIS JS. I have read the docs but I am looking for some example of setting the default search service. I am looking to use all services (featureLayer and esri geocoding services) but also care about the order of the results returned.

I suspect this is accomplished using the activeSource parameter of the search widget. But have not been able to find an example of this implemented.

I have tried implementing like this..

var searchWidget = new Search({
    container: "searchDiv",
    view: view,
    allPlaceholder: "Places or Tyler Communities",
    activeSource: 0,
    sources: [{
        featureLayer: {
            url: "https://services5.arcgis.com/6gTxIFMxZdWxCrVQ/arcgis/rest/services/...",
            popupTemplate: { // autocasts as new PopupTemplate()
                title: "{customer} is  Tyler Connected Community!",
                overwriteActions: true
            }
        },
        activeSourceIndex: 1,
        searchFields: ["customer", "city", "state"],
        displayField: "customer",
        exactMatch: false,
        outFields: ["*"],
        name: "Tyler Communities",
        placeholder: "example: city of birmingham",
        zoomScale: 500000
    }]
});

I have also tried implementing like...

searchWidget.activeSource = 0;

But both return this error...

dojo.js:340 Uncaught TypeError: [accessor] cannot assign to read-only property 'activeSource' of esri.widgets.Search.SearchViewModel

To help explain. In the image below the feature layer results are returned below the geocoded results. I would like to have the feature results (Tyler Communities) first.

I also need this reversed in the dropdown selections too. See image below.

...

EDIT 1:

It was suggested I could remove the default using includeDefaultSources, which pushes the featureLayer to the top of the search list. Is it then possible to add back the locator as a source in the searchWidget sources array?

Something similar to...

var searchWidget = new Search({
    container: "searchDiv",
    view: view,
    activeSourceIndex: 1,
    allPlaceholder: "Places or Tyler Communities",
    includeDefaultSources: false,
    sources: [{
        featureLayer: {
            url: "https://services5.arcgis.com/6gTxIFMxZdWxCrVQ/arcgis/rest/services/customers_2/FeatureServer/0",
            //url: customersLayer,
            popupTemplate: { // autocasts as new PopupTemplate()
                title: "{customer} is  Tyler Connected Community!",
                overwriteActions: true
            }
        },
        searchFields: ["customer", "city", "state"],
        displayField: "customer",
        exactMatch: false,
        outFields: ["*"],
        name: "Tyler Communities",
        placeholder: "example: city of birmingham",
        zoomScale: 500000
    }, {
    Locator: {
        url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
    },
      name: "World Geocoder",
    }]
});

EDIT 2: Solved

AS per @Katah, I was able to reorder the Search sources by first removing the default (ESRI World Geocoding) by assigning includeDefaultSources to false and then adding it back manually at the bottom of the source list. I could then assign activeSourceIndex to -1 to use all from my source list in the proper order. Demonstrated below.

var searchWidget = new Search({
    container: "searchDiv",
    view: view,
    activeSourceIndex: -1,
    allPlaceholder: "Search Places or Features...",
    includeDefaultSources: false,
    locationEnabled: false,
    sources: [{
        featureLayer: {
            url: "https://services5.arcgis.com/6gTxIFMxZdWxCrVQ/arcgis/rest/services/customers_2/FeatureServer/0",
            //url: customersLayer,
            popupTemplate: { // autocasts as new PopupTemplate()
                title: "{customer} is Tyler Connected Community!",
                overwriteActions: true
            }
        },
        searchFields: ["customer", "city", "state"],
        ...
    }, {
        //Pass in the custom locator to the sources
        locator: new Locator({
            url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
            popupTemplate: { overwriteActions: true },
        }),
        name: "World Geocoding",
        outFields: ["Match_addr"],
    }
    ]
});

Answer 1

try setting the includeDefaultSources to false, if you do not need the default AGO Geolocator:

var searchWidget = new Search({
  container: "searchDiv",
  view: view,
  allPlaceholder: "Places or Tyler Communities",
  includeDefaultSources: false,
  sources: [{
    featureLayer: {
      url: "https://services5.arcgis.com/6gTxIFMxZdWxCrVQ/arcgis/rest/services/...",
      popupTemplate: { // autocasts as new PopupTemplate()
        title: "{customer} is  Tyler Connected Community!",
        overwriteActions: true
      }
    },    
    searchFields: ["customer", "city", "state"],
    displayField: "customer",
    exactMatch: false,
    outFields: ["*"],
    name: "Tyler Communities",
    placeholder: "example: city of birmingham",
    zoomScale: 500000
  }]
});

That will remove the AGO Geolocator from the sources, and then only the sources that you have set up will be available.