Error: You must provide a featureId to enter direct_select mode

[HuangLiPang]

Got this error when using change mode example.

For reproducing it, create a line or polygon and then click the map (the feature now cannot be edited) and then double click the feature.

[garretteklof]

This seems to have to do with how the component is updating currently with mode changes:

    if (prevProps.mode !== this.props.mode) {
      this._draw.changeMode(this.props.mode, this.props.modeOptions);
    }

With a mode change, it looks like you have to account for passing in modeOptions (empty {} by default). A switch to direct_select mode requires that you pass in which featureId is being selected through the options. I haven't really dug in enough to see why this isn't a problem with simple_select -> as you can see selections still occur even with empty options. Honestly the component API (updating two separate props) for this is a little clunky, and I was running into race conditions with rendering.

The way around it for me was to forego manipulating mode in React state altogether, and handle the mode changes by manipulating them yourself with the MapboxDraw instance (via ref), which then can be listened / captured in the various event handlers.

[SebastianCJ]

This seems to have to do with how the component is updating currently with mode changes:

    if (prevProps.mode !== this.props.mode) {
      this._draw.changeMode(this.props.mode, this.props.modeOptions);
    }

With a mode change, it looks like you have to account for passing in modeOptions (empty {} by default). A switch to direct_select mode requires that you pass in which featureId is being selected through the options. I haven't really dug in enough to see why this isn't a problem with simple_select -> as you can see selections still occur even with empty options. Honestly the component API (updating two separate props) for this is a little clunky, and I was running into race conditions with rendering.

The way around it for me was to forego manipulating mode in React state altogether, and handle the mode changes by manipulating them yourself with the MapboxDraw instance (via ref), which then can be listened / captured in the various event handlers.

Do you happen to have an example of this? I'm trying to manipulate mode with React State to no avail

[hermanmitish]

This worked for me:

<Draw
      mode={mode}
      modeOptions={ {featureId: selectedFeatures[0]?.id||''} }
      onDrawSelectionChange={ (e:any)=>setSelectedFeatures(e?.features||[]) }       
      onDrawModeChange={ ({mode}:any)=>setMode(mode) } />