Fix issue where labels could not be clicked to change or focus inputs

2026-05-15 21:48:20 +02:00 · 2020-03-10 13:39:22 -07:00
parent 70380880db
commit d82936ff24
1 changed files with 10 additions and 2 deletions
@@ -56,8 +56,16 @@ export function uiInit(context) {
    function render(container) {

        container
-            // disable double-tap-to-zoom on touchscreens
-            .on('click.ui', eventCancel)
+            .on('click.ui', function() {
+                var isTargetingLabel = d3_event.composedPath().some(function(node) {
+                    return node.nodeName === 'LABEL';
+                });
+                // clicking a <label> affects its <input> by default so don't prevent that
+                if (isTargetingLabel) return;
+
+                // disable double-tap-to-zoom on touchscreens
+                d3_event.preventDefault();
+            })
            // disable pinch-to-zoom in Safari
            .on('gesturestart.ui', eventCancel)
            .on('gesturechange.ui', eventCancel)