React-mapbox-gl: Prevent map zoomout/move on layer click/popup

[benderlidze]

I have this simple code. When I zoom in and drag a map and then click on the poly to get the popup the popup apers but the map zooms out and move center to the initial values. How to disable this?
Should I update the state values? But what if I don't want to center the map on the popup?
Thanks.

constructor(props) {
    super(props);
    this.state = {
      fitBounds: undefined,
      center: [0,0],
      zoom: [3],
      popup: undefined
    };
  }

 popupClick(data,map){
     this.setState({
      popup: {
        id: data.id,
        coord:  [ map.lngLat.lng, map.lngLat.lat],
      },
      // zoom: [map.map.getZoom()],
      // center: map.map.getCenter()
    });

  };

  render() {


      return (

        <Map style="mapbox://styles/mapbox/light-v9" 
            center = {[0,0]}
            zoom = {[3]}
            containerStyle={{height: "100vh",width: "100vw"}}>

            <Layer type="fill" id="somePolyName"  paint={{ 'fill-color': "red",'fill-outline-color': "blue", 'fill-opacity':0.4 }}>
              { 
                DATA.map((p, key) => <Feature coordinates={[p]} key={key}  
                  onMouseEnter={this.onToggleHover.bind(this, 'pointer')}
                  onMouseLeave={this.onToggleHover.bind(this, '')}
                  onClick={this.popupClick.bind(this, { id: key, text: "some text"})}
                  />) 
              }
            </Layer>

            {this.state.popup && (
              <Popup key={1} coordinates={this.state.popup.coord}>
                  <div>{this.state.popup.id}</div>
              </Popup>
            )}
        </Map>
      );

    }

[dm261395]

When you click the popup, another render of your component is triggered. Since you create the centre and zoom arrays in the render method, they have a new reference each render. Because the map will update its zoom/centre via props only for new references, the map detects new references and sets its zoom/centre to the values contained in the array.

If you want to set only the initial zoom/centre of the map, store the zoom and centre arrays as constants outside of the render method, and pass the arrays as props to the map. This way, the map will detect no change of reference of the props on subsequent renders and not change its zoom/centre according to the zoom/centre props.

[MohsinGhani]

I am getting the same issue, is anyone found the solution for this issue?

[nidhi-anilabsinc]

i also have same issue