grid option in labeling interface breaks labeling

[chorus12]

The following configuration breaks labeling interface - one can not assign a label to a rectangle:

<View>
  <RectangleLabels name="label" toName="image">
    <Label value="Airplane" background="green"/>
    <Label value="Car" background="blue"/>
  </RectangleLabels>
  <Image name="image" value="$image" grid="true" gridSize="40"/>
</View>

If you remove grid="true" gridSize="40" from Image tag then you can assign a label to a rectangle.

Environment (please complete the following information):

• Label Studio Version == 1.6

[eosnas]

I am also having this issue in version 1.12.0, community edition. When I add a grid to the labeling interface code, I loose the ability to annotate. The grid is important for my case because many of my images have large sections of empty and homogenous background and we are labeling relatively small objects (birds on water from 1200 ft above ground). Using the default settings when setting up a project (airplanes), adding grid="true" to the JSON does not allow labeling:

<View>
  <Image name="image" value="$image" grid="true"/>
  <RectangleLabels name="label" toName="image">
    <Label value="Airplane" background="green"/>
    <Label value="Car" background="blue"/>
  </RectangleLabels>
</View>

Does not work. When the grid="true" is removed, labeling works correctly.

Thanks.

[AlexanderStone-DFO]

I have the fix though I have no idea how to write unit tests or make an actual bug fix pull request.
Fix:
At the file
web/libs/editor/src/components/ImageGrid/ImageGrid.jsx
There is line 38
<Layer opacity={0.15} name="ruler" >
change it to
<Layer opacity={0.15} name="ruler" listening={false}>
Then the cursor interactions are not captured by the grid and you can annotate again.
I would appreciate if someone more used to open source can implement this fix.