Popup widget Dropdown Issue

[SwathiBommidi]

Hi,

I am using dropdown list to select properties in the popup panel that was developed by RobertScheitlin__GISP rather than using the next/previous buttons due to the number of features being returned.

I am facing few issues as Index of dropdown list which I've selected is not matching with the features that are displayed. For few features I am able to get correctly but for most of them the details being displayed correspond to other features in the popup.features array. The features that are in the drop menu all match to the features in the array but they appear out of order, and pull through the previous entry from the features array. This normally isn't appearing for small groups of features (up to 7) but does come through for groups larger than that. It also doesn't affect a percentage of features at the tail end of the arrays. 

This is the part of code which we have added for dropdown menu

console.log(this.popup);

          popupFeatures = this.popup.features;

          dropFeatures = [];

          let select = document.getElementById('dropFeatures');

          select.innerHTML = "";

          for (i=0; i<this.popup.features.length; i++)

          {

            displayField = this.popup.features[i]._layer.displayField;          

            dropFeatures.push(this.popup.features[i].attributes[displayField]);

            var opt = document.createElement('option');

             opt.innerHTML = this.popup.features[i].attributes[displayField];

             opt.value = i

             select.appendChild(opt);

          };

          console.log(dropFeatures);        

          this.displayPopupContent(this.popup.getSelectedFeature());

          if(this.popup.features.length === 0){

            domUtils.show(this.instructions);

            domUtils.hide(this.actionsPaneDiv);

          }else{

            domUtils.hide(this.instructions);

            domUtils.show(this.actionsPaneDiv);

          }

          this.displayPopupContent(this.popup.getSelectedFeature());

          this.featureCount.innerHTML = "(1 of " + this.popup.features.length + ")";

          //enable navigation if more than one feature is selected

          if(this.popup.features.length > 1){

            domUtils.show(this.pager);

            domClass.add(this.previous, "hidden");

            domClass.remove(this.next, "hidden");

            domClass.remove(this.clearSel, "hidden");

This is the function which is displaying features for dropdown list.

          getValue: function() {

        // Pull index from dropdown menu

        let dropValue = document.getElementById("dropFeatures").selectedIndex;

        // Update popup content

        this.popup.select(dropValue);  

        

this.displayPopupContent(this.popup.getSelectedFeature());

// Update feature count

        this.featureCount.innerHTML = "(" + (this.popup.selectedIndex + 1) + " of " + this.popup.features.length + ")";

      }

    });

  });

I am sharing few attachments, where I have selected the feature (BROOKWOOD), but the information displayed is of feature (THE PARISH CHURCH OF ST JAMES)