search

geoman-io / leaflet-geoman

🍂🗺️ The most powerful leaflet plugin for drawing and editing geometry layers
https://geoman.io
MIT License
2.21k stars 433 forks source link

Autofocus processing was blocked because a document already has a focused element error - how to troubleshoot? #1404

Closed barchambeault-lightbox closed 11 months ago

barchambeault-lightbox commented 1 year ago

I cannot reproduce this error in jsfiddle or codesandbox, so I know it's my issue, but need some pointers on how to track it down. I'm doing this:

  map.pm.Toolbar.copyDrawControl("Text", { name: "myTextCtrl" })
  map.pm.enableDraw("myTextCtrl")

in jsfiddle it works fine. you get a "click to place text" cursor, you click it somewhere, and then you get an editable textarea control to type in. but, in my code, I get "Autofocus processing was blocked because a document already has a focused element error" error in the browser as soon as you click the "click to place text" cursor somewhere, and there is no editable textarea, just a blank one.

Any help on what I might have that's hogging the focus or whatever is going wrong here would be greatly appreciated.

barchambeault-lightbox commented 1 year ago

We are currently working around this in this way: when the user clicks the "click to place text" cursor, we get a pm:create. in there, we do:

  const textLayer = L.marker([latlng], { pmIgnore: false, textMarker: true })
  textLayer.addTo(map);
  textLayer.pm.enable();
  textLayer.pm.focus();

then we listen for pm:textblur. this all works great, but is clearly not the "correct" way, so again, any help here would be greatly appreciated...

barchambeault-lightbox commented 1 year ago

update on the workaround above - while it does let me put a text layer into edit mode, once i'm done editing it, the map is "stuck". normally, after you click out of the textarea, the cursor goes back to a hand and you can manipulate the map. but, in my case, the cursor stays a pointer, and you can no longer manipulate the map. so, my workaround doesn't really work.

so, again, looking for any kind of pointers here. thanks.

barchambeault-lightbox commented 1 year ago

so, looks like i just ran into this bug: https://github.com/geoman-io/leaflet-geoman/issues/1300

if i do a map.dragging.enable() after the pm:textblur, everything is fine. so, our workaround is still in place. as for the "Autofocus processing was blocked because a document already has a focused element error" message, this is also reproducible in the geoman demo (https://geoman.io/demo), so i guess i just need to live with it for now...

Falke-Design commented 11 months ago

Sorry for the late response.

I checked what could cause this issue and it is because of the autofocus property on the textarea. In the PR #1409 we will remove the autofocus property because it should be not set by Geoman and has no further purpose for us.

barchambeault-lightbox commented 11 months ago

@Falke-Design thanks for the response. good to know the error will be doing away. we use the "pro" version, which is way behind the "free" version in terms of bug fixes and new features. Any idea when the "pro" version will get in sync with the "free" version?

Falke-Design commented 11 months ago

I already talked with @codeofsumit. We will release 2.15.0 ASAP and then update the Pro version as fast as possible.

Falke-Design commented 11 months ago

Fixed with #1409