Feature Table editing wrong feature when sorted

JasonJordan00 · ‎02-03-2022

Brand new to Javascript so I'm hoping I'm missing something simple here, but I have a very simple page cloned from the feature table with editing enabled sample code but swapped out my own feature layer. For the most part it works great but if I tell the table to sort on a column, it will select the correct feature but push updates to a different one.

Here's where I select the record, I see the correct feature highlight.

Changing the status field in the same record updates a different location.

This only happens if I include direction: "asc" in one of the field configurations. Assuming there is a place for me to identify the objectid?

Here's my page for reference. Thanks everyone

<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>
FeatureTable widget with editing enabled | Sample | ArcGIS API for
JavaScript 4.22
</title>

#viewDiv {
height: 50%;
width: 100%;
}

.container {
height: 50%;
width: 100%;
}
</style>

const map = new Map({
basemap: "streets-navigation-vector"
});

const view = new MapView({
container: "viewDiv",
map: map,
center: [-95.75,29.18],
zoom: 7,
popup: {
autoOpenEnabled: false
} //disable popups
});

view.when(() => {
featureLayer = new FeatureLayer({
// URL to the service
url: "https://xxxxxxxxxxxxxxxxx/FeatureServer/0",
outFields: ["*"],
title: "Emergency Reporting Areas"
});
map.add(featureLayer);

// Create the feature table
const featureTable = new FeatureTable({
view: view,
layer: featureLayer,
editingEnabled: true,
menuConfig: {
items: [
{
label: "Zoom to feature(s)",
iconClass: "esri-icon-zoom-in-magnifying-glass",
clickFunction: (event) => {
zoomToSelectedFeature();
}
}
]
},
// Autocast the FieldColumnConfigs
fieldConfigs: [
{
name: "name",
label: "Area Name",
editable: false,
direction: "asc"
},
{
name: "type",
label: "Type",
editable: false,
},
{
name: "boilwater",
label: "Boil Water Notice?"
},
{
name: "evacuation",
label: "Evacuation Status"
},
{
name: "poweroutage",
label: "Power Outage?"
},
{
name: "highwater",
label: "High Water?"
}
],
container: document.getElementById("tableDiv")
});
const polyInfos = {
layer: featureLayer,
label:"name",
updateEnabled: false,
formTemplate: {
// autocasts to FormTemplate
elements: [
{
// autocasts to FieldElement
type: "field",
fieldName: "name",
label: "Area"
},
{
type: "field",
fieldName: "type",
label: "Type"
},
{
type: "field",
fieldName: "poweroutage",
label: "Power Outage"
},
{
type: "field",
fieldName: "boilwater",
label: "Boil Water?"
},
{
type: "field",
fieldName: "evacuation",
label: "Evacuation Status"
}
]
}
};
const editor = new Editor({
view: view,

layerInfos: [polyInfos],
// It is possible to set snapping via the API by directly setting SnappingOptions in the Editor. This can also be toggled on/off using the CTRL key. By default snapping is not enabled, setting enabled to true toggles this.
snappingOptions: {
// Autocastable to snapping options
enabled: true, // sets the global snapping option that controls both geometry constraints (self-snapping) and feature snapping.
featureSources: [
{
// Autocastable to FeatureSnappingLayerSource
// Enable feature snapping on specified layer(s)
layer: featureLayer
}
]
}
});

// Get the FeatureLayer's layerView and listen for the table's selection-change event
featureTable.on("selection-change", (changes) => {
// If the selection is removed, remove the feature from the array
changes.removed.forEach((item) => {
const data = features.find((data) => {
return data.feature === item.feature;
});
if (data) {
features.splice(features.indexOf(data), 1);
}
});

// If the selection is added, push all added selections to array
changes.added.forEach((item) => {
const feature = item.feature;
features.push({
feature: feature
});
});
});
view.ui.add(editor, "top-right");
function zoomToSelectedFeature() {
// Create a query off of the feature layer
const query = featureLayer.createQuery();
// Iterate through the features and grab the feature's objectID
const featureIds = features.map((result) => {
return result.feature.getAttribute(featureLayer.objectIdField);
});
// Set the query's objectId
query.objectIds = featureIds;
// Make sure to return the geometry to zoom to
query.returnGeometry = true;
// Call queryFeatures on the feature layer and zoom to the resulting features
featureLayer.queryFeatures(query).then((results) => {
view.goTo(results.features).catch((error) => {
if (error.name !== "AbortError") {
console.error(error);
}
});
});
}
});
});
</script>
</head>