Bug: Map Components measurement tools block map interaction in mobile/responsive layout (Area + Direct Line, “New measurement” overlay captures input)

[EmrahAydemir]

Hi everyone,
I’m reporting what looks like a bug in ArcGIS Map Components measurement components when the app is in a mobile/responsive layout (small viewport). This is not related to arcgis-expand or any custom UI—happens with the measurement component placed directly in the scene.

When using the Map Components 3D measurement tools, clicking/tapping “New measurement” opens a bottom instruction/overlay panel. After this panel appears, the SceneView stops receiving pointer/touch events, so I cannot place the first measurement point (and therefore can’t measure). This makes the tool unusable in mobile/responsive layouts.

This affects both:

• AreaMeasurement3D (<arcgis-area-measurement-3d>)

• Direct line measurement (<arcgis-direct-line-measurement-3d>)

Where it can be reproduced

• Mobile devices (e.g., iOS Safari / WebKit)

• Desktop Chrome as well: if the window is resized to a mobile width or via DevTools → Toggle Device Toolbar (mobile emulation)

Expected

After “New measurement”, tapping/clicking on the scene should place the first vertex and start the measurement workflow.

Actual

After “New measurement”, the overlay/instruction panel appears and the scene does not accept taps/clicks to place vertices (input seems blocked/captured by the overlay).

Official samples (component vs classic widget)

This issue is reproducible in Esri’s official Map Components sample for 3D measurement.
However, the classic/programmatic widget approach works as expected (points can be placed normally).

Steps to reproduce (quick)

1. Open the official Map Components 3D measurement live sample (link below).

2. Reduce viewport to a mobile size (or enable Device Toolbar).

3. Activate Area or Direct Line measurement.

4. Click/tap “New measurement”.

5. Try placing the first point on the scene → it doesn’t register.

Attachments

• Screen recording

Links

Official Map Components sample (repro): https://developers.arcgis.com/javascript/latest/sample-code/measurement-3d/live/

Classic widget sample (works): https://developers.arcgis.com/javascript/latest/sample-code/widgets-measurement/live/

Question

• Is this a known issue with Map Components measurement tools in responsive/mobile layout?

• Is there a recommended workaround (e.g., configuration/CSS to prevent the overlay from capturing pointer events), or should we prefer the classic widget for mobile?

• Any planned fix / target release?

Thanks!

[AnneFitz]

Hi, the issue that you're experiencing seems to be related to the components being wrapped in arcgis-expand, which uses the "drawer" mode by default in mobile view. To change the default, set the expand component's `mode` to "floating".

This is not related to arcgis-expand or any custom UI—happens with the measurement component placed directly in the scene.

We were not able to reproduce this issue when the component was added directly to the scene. Could you share a Codepen or some sort of reproduction case if you are still experiencing this issue? Thanks!

[LMFGeospatial]

Hello @AnneFitz - I'll add that I noticed this same thing. And yes, my own measurement tools are wrapped in Expand components. Instead of setting up a Codepen, you can simply use the Esri sample:

https://developers.arcgis.com/javascript/latest/sample-code/measurement-2d/ 

If you use the browser developer tools to adjust the screen size to a mobile device size, you will notice the effect that is being cited.

I will add that I set my Expand components' mode to "floating" as you suggested and it does appear to address the issue. However, I am not wholly sure what sort of impact this will have on non-mobile screens.

[AnneFitz]

I will add that I set my Expand components' mode to "floating" as you suggested and it does appear to address the issue. However, I am not wholly sure what sort of impact this will have on non-mobile screens.

---

There should be no impact on non-mobile screens. The default "mode" is "auto" - which switches between "floating" on non-mobile, and "drawer" in mobile mode. Changing the mode to "floating" will only impact the behavior on mobile, since the default is already "floating" for non-mobile! See the documentation for more information: https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-expand/#...

Thanks!