Hello, we have come across a seemingly novel issue in our Vue 3 app that uses `@arcgis/core`, where for whatever reason both of the selection tools will start at the top left corner of the map, instead of where the cursor is.
Here's a sample of how we use the Sketch widget:
// All of this is inside of the body of
// mapView.value.when() statement
//
// Anything with .value is a Vue 3 ref
// https://vuejs.org/api/reactivity-core.html#ref
const graphicLayer = new GraphicsLayer({
  id: 'our-graphics-layer',
  title: 'Graphics',
  parent: map.value?.basemap
});
const sketch = new Sketch({
  layer: graphicLayer,
  layout: 'horizontal',
  view: mapView.value,
  creationMode: "update",
  defaultCreateOptions: {
    mode: "hybrid",
  },
  snappingOptions: {
    enabled: true,
    featureSources: [{ layer: graphicLayer, enabled: true }]
  }
});
mapView.value.map.add(graphicLayer);
// isBlank is a utility function that just checks if a variables value is
// undefine, null or ''
graphicLayer.when(() => {
   mapView.value.extent = graphicLayer.fullExtent;
   if (!isBlank(mapView.value?.graphics) && mapView.value?.graphics?.length > 0) {
     graphicLayer.graphics.addMany(mapView.value?.graphics);
   }
});
mapView.value.ui.add(sketch, "bottom-left");
We've tried with on `@arcgis/core` version `4.29.7` and `4.29.10`.
As of note, we can draw points, lines, rectangles, circles and polygons just fine, as well as move them around just fine.
The only issue is that the selection tools will start a selection in the top-left most corner of the map, and not at the cursors position.
EDIT: As a note, this is happening on recent versions of both Firefox and Chrome.
Solved! Go to Solution.
Hi @DavidDrennan it sounds like this could be a CSS issue. Did it work in previous versions of the API? Try to repro in a codepen using vanillaJS. Otherwise, you'll need to provide a simple, focused StackBlitz or GitHub repo.
Hi @DavidDrennan it sounds like this could be a CSS issue. Did it work in previous versions of the API? Try to repro in a codepen using vanillaJS. Otherwise, you'll need to provide a simple, focused StackBlitz or GitHub repo.
It ended up being CSS, we still had the CSS for an older version of the library loaded. Thanks!