Layer filter is removed when popup opens

[MK13]

I am running the code below in a custom experience builder widget. It is supposed to filter multiple layers in the map. The filter works as expected but as soon as I click on a feature in the map and the pop up opens, the filter is cleared from all the layers. I expect the filter to be maintained on the layers until I remove it on the click of another button. What could be causing this behaviour?

import { React, type SqlQueryParams, type AllWidgetProps, DataSourceManager, type FeatureLayerDataSource } from 'jimu-core'
import { JimuMapViewComponent, type JimuMapView } from 'jimu-arcgis'
import FeatureLayer from 'esri/layers/FeatureLayer'
import { Select, Option } from 'jimu-ui'
import { FeatureLayerDataSourceImpl } from 'jimu-core/data-source'
import { FeatureLayerDataSourceManager } from 'dist/widgets/common/chart/src/runtime/chart/data-source'

const { useState } = React //{} allow destructuring of this constant

const Widget = (props: AllWidgetProps<any>) => {
  const [jmv, setJmv] = useState<JimuMapView>()
  const activeViewChangeHandler = (jimumapview: JimuMapView) => {
    if (jimumapview) {
      setJmv(jimumapview)
    }
  }
  const addLayerHandler = (evt) => {
    evt.preventDefault()
    //filter all layer views
    jmv.view.map.layers.forEach((lyr) => {
      if (lyr.type === 'feature' && (lyr.title === 'OpenMarketSm' || lyr.title === 'ExclusionZoneSm' || lyr.title === 'ExclusionZoneSm')) {
        let featLyrView = null
        jmv.view.whenLayerView(lyr).then((lyrview) => {
          featLyrView = lyrview
          featLyrView.filter = {
            where: "ServiceAreaType ='Comm. Recycling'"
          }
        })
      }
    })
  }
  return (
      <div>    
      <div>Add Layers to a Map</div>
      <div>
  {props.useMapWidgetIds && props.useMapWidgetIds.length === 1 &&
        (<JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={activeViewChangeHandler}/>)}
      </div>
      <form onSubmit={addLayerHandler}>
        <button className='btn btn-primary'>
          Add Layer to map
        </button>
      </form>
      </div>
  )
}

export default Widget
//activeViewChangeHandler is called once when the map is ready
// {/* ?. checks if object is null  */}

@TonghuiMing 

[UbaidGul_opaz]

I am not sure why you getting this behavior but I would suggest you two things which might help I think. 
1- you are using onSubmit on the form it might be reloading the page try to use onClick of button and check again.
2- You can alternatively use the definition expression of layer and update it what ever you want which might not refresh onSubmit. 

[MK13]

Thanks for the suggestions. I removed the Form code and added my addLayerHandler method on the OnClick of a button but I see the same behaviour. The filters are cleared when the pop up opens.

 <button className='btn btn-primary' onClick={addLayerHandler}>
          Add Layer to map
        </button>

I also looked at the documentation at https://developers.arcgis.com/javascript/latest/api-reference/esri-views-layers-FeatureLayerView.htm... and there is no definitionExpression property on the FeatureLayerView.

[MK13]

<deleted>

[MK13]

I suspect that this piece of code below is what's causing the refresh because of the useState which is supposed to re-render the component when the state changes but I am new to React and Javascript and don't really know if that's what's happening here.

const [jmv, setJmv] = useState<JimuMapView>()
  const activeViewChangeHandler = (jimumapview: JimuMapView) => {
    if (jimumapview) {
      setJmv(jimumapview)
    }
  }

[QunSun · Accepted solution]

Hi @MK13 ,

When you click map, data source selection will change. JimuLayerView will automatically update layer.filter by data source. So JimuLayerView overrides your layer.filter.

You can update 'where' by dataSource.updateQueryParams() method, Here is  the solution, please have a try.

async addLayerHandler (evt) {
    evt.preventDefault()

    await jmv.whenAllJimuLayerViewLoaded()
    const jimuLayerViews = jmv.getAllJimuLayerViews()
    jimuLayerViews.forEach(async (jimuLayerView) => {
      const layer = jimuLayerView.layer

      if (layer.type === 'feature' && (layer.title === 'OpenMarketSm' || layer.title === 'ExclusionZoneSm' || layer.title === 'ExclusionZoneSm')) {
        let dataSource = null

        if (jimuLayerView.layerDataSourceId) {
          dataSource = await jimuLayerView.createLayerDataSource()
        }

        if (dataSource) {
          dataSource.updateQueryParams({
            where: "ServiceAreaType ='Comm. Recycling'"
          }, props.widgetId)
        }
      }
    })
  }