Interactive MiniMap not working with custom nodes and edges

[gitHoussem]

Hello,
I've been trying to make the "MiniMap" interactive for an hour now, and I can't seem to figure out what I am doing wrong. I'm up to date in All vueflow packages.

Below is my template code

<VueFlow
    v-model="elements"
    class="basicflow"
    fit-view-on-init
    :delete-key-code="null"
    :min-zoom="0"
    :max-zoom="4"
    :edges-updatable="false"
    :nodes-connectable="false"
    :default-edge-options="customEdgeStyling"
    :selection-mode="SelectionMode.Partial"
    :elements-selectable="isMultipleNodeSelectionActive"
    :selection-key-code="dragAndSelectKey"
    :multi-selection-key-code="clickAndMultipleSelectKey"
    @nodeDrag="onNodeDrag">
    <!-- Nodes Definition -->
    <template #node-custom="node">
      <!--  Node Container used to display the group selection style status -->
      <div>
        <!-- Used for the normal/internal tables -->
        <TableNode
          v-if="isTableVisible(node)"
          :nodeID="node.id"
          :allow-right-click-events="true"/>
        <!-- Used for the non project/external tables -->
        <SimpleNode v-else-if="isExternalTableVisible(node)" :nodeID="node.id" />
        <!-- Used for the 2nd relation level tables -->
        <SimpleNode :nodeID="node.id" v-else-if="isTable2ndLevelAndVisible(node)" />
      </div>
    </template>

    <!-- Edges Definition -->
    <template #edge-custom="edge">
      <RelationshipEdge v-bind="edge" v-if="isEdgeVisible(edge)" />
    </template>

    <MiniMap pannable zoomable node-color="#0096FF" />
  </VueFlow>

No error is showing on the console

interactive.minimap.mp4

[bcakmakoglu]

Could you try binding it explicitly like :pannable="true" :zoomable="true"?

[gitHoussem]

I tried it and it still doesn't work unfortunately

[bcakmakoglu]

Must be doing sth wrong since it works fine in a sandbox: https://codesandbox.io/p/devbox/vibrant-hellman-hh2mmw?file=%2Fsrc%2FApp.vue%3A41%2C48

[gitHoussem]

I found the issue in case it might help others in the future. I had coded a custom edge and put this in the css

This property prevents the element from receiving mouse events

[bcakmakoglu]

I'll give that a look, thanks for the info :)