Draw and edit props only update from setState once and fail to update on subsequent changes

[brandonwsims]

What I expected

I have an EditControl in which I want the polygon and rectangle draw tools available initially. Once a user draws a shape, onCreated is being triggered, and I update the props to disable the polygon and rectangle tools while enabling the edit and remove tools.

Opposite of this, if a user deletes a polygon/rectangle they drew, the initial state should come back with the draw tools enabled for polygon/rectangle while hiding the editing tools for edit/remove.

What's happening

Once onCreated is triggered, the toolbar successfully has its props updated. The drawing tools are disabled and the editing tools are enabled. However, once a drawing is deleted, the inverse does not happen. onDeleted is the trigger for this, and it is being reached, but the calls to update the state which controls polygon, rectangle, edit, and remove is not updating the component.

I believe this is similar to Issue #69. I saw that this issue was fixed in #83, but it seems like the problem still persists.

Code

Component

<FeatureGroup>
  <EditControl
      position={'topleft'}
      onCreated={this.onDrawCreated}
      onDeleted={this.onDrawDeleted}
      draw={{
          polyline: false,
          circle: false,
          marker: false,
          circlemarker: false,
          polygon: this.state.showDrawPolygon,
          rectangle: this.state.showDrawRectangle
      }}
      edit={{
          edit: this.state.showDrawEdit,
          remove: this.state.showDrawRemove
      }}
  />
</FeatureGroup>

Handlers

onDrawCreated(e) {
    this.setState({
        showDrawPolygon: false,
        showDrawRectangle: false,
        showDrawEdit: true,
        showDrawRemove: true
    })
}

onDrawDeleted(e) {
    this.setState({
        showDrawPolygon: true,
        showDrawRectangle: true,
        showDrawEdit: false,
        showDrawRemove: false
    });
}

Examples

Initial state (correct). Only rectangle and polygon are showing.

After drawing (correct). Rectangle and polygon are removed, edit and remove are shown.

After delete (unexpected behavior). Component props for polygon, rectangle, edit, and remove did not update properly.

[thefat32]

Did you try to reproduce in a codesandbox or fiddler?

I have implemented a logic almost identical to yours and it's working properly :/

[junjou]

Hello, I have a similar problem. I don't know what we are doing wrong but, just for information, if i'm adding a Math.random() key within edit props option it's working properly. Something like this:

setDrawOptions({
  ...drawOptions,
  polyline: true
  workaround: Math.random(),
});

cheers

[brandonwsims]

Did you try to reproduce in a codesandbox or fiddler?

I have implemented a logic almost identical to yours and it's working properly :/

I have not, but I created this separate of the actual project I'm working on just to test it out. There was no other dependencies or code in there apart from what was needed to create the map and modify these edit tools.