From 18bba95119ae20020aacf9d77114b5a16763131a Mon Sep 17 00:00:00 2001
From: bjorn <bjorn@swis.nl>
Date: Wed, 29 Jul 2026 21:16:06 +0200
Subject: [PATCH 1/3] fix: read the associated label's text in inputLabel()

jQuery's .val() getter reads elem.value, and a <label> has no value
property, so the lookup always returned "" and every input imported from
an HTML5 <menu> silently fell back to its name attribute. Read .text()
instead, trim it, and only fall back to the name attribute when there is
no label text at all.

The wrapping <label> path is trimmed the same way, so a whitespace-only
wrapper no longer wins over the name attribute.

The id is now escaped before it goes into the attribute selector, and the
html5 polyfill's [contextmenu=<id>] selector is quoted and escaped too:
an id holding a quote or a CSS metacharacter used to produce a malformed
selector and throw. $.escapeSelector() only exists in jQuery 3+, so the
escaping is done locally.

Fixes #811
---
 CHANGELOG.md                            |   1 +
 documentation/docs/html5-polyfill.md    |   2 +
 src/jquery.contextMenu.js               |  44 ++++-
 test/unit/issue-811-input-label.test.js | 216 ++++++++++++++++++++++++
 4 files changed, 260 insertions(+), 3 deletions(-)
 create mode 100644 test/unit/issue-811-input-label.test.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 918b6628..e0a307f0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,7 @@
 * A `select`'s phantom mousedown is no longer treated as an outside click (fixes #744)
 * A re-dispatched layer click now targets the element actually clicked (fixes #771)
 * Guard against undefined `e.data` in the contextmenu handler (fixes #777)
+* Inputs imported from an HTML5 `<menu>` are named after their `<label>` again instead of falling back to the `name` attribute (fixes #811)
 
 #### Documentation
 
diff --git a/documentation/docs/html5-polyfill.md b/documentation/docs/html5-polyfill.md
index b91980e6..5bd6af70 100644
--- a/documentation/docs/html5-polyfill.md
+++ b/documentation/docs/html5-polyfill.md
@@ -45,6 +45,8 @@ considering the following HTML `$.contextMenu.fromMenu($('#html5menu'))` will re
 <label> the text <input|textarea|select>
 ```
 
+An imported `<input>`, `<textarea>` or `<select>` is named after its label: the text of the wrapping `<label>`, or of the `<label for="someId">` pointing at it. That text is trimmed, and when there is none the element's `name` attribute is used instead.
+
 The `<menu>` must be hidden but not removed, as all command events (clicks) are passed-thru to the original command element!
 
 Note: While the specs note `<option>`s to be rendered as regular commands, `$.contextMenu` will render an actual `<select>`.
diff --git a/src/jquery.contextMenu.js b/src/jquery.contextMenu.js
index 5f77c0d9..027df531 100644
--- a/src/jquery.contextMenu.js
+++ b/src/jquery.contextMenu.js
@@ -2564,6 +2564,29 @@
         return $(target);
     }
 
+    // trim leading/trailing whitespace off a string. `$.trim()` is deprecated in
+    // jQuery 3 and gone in jQuery 4, and `String.prototype.trim` is not there in
+    // the oldest browsers jQuery 1.12 still runs on, so do it by hand.
+    function trimText(text) {
+        return String(text == null ? '' : text).replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+    }
+
+    // escape a value so it can be dropped inside a double quoted CSS attribute
+    // selector, e.g. `[for="<value>"]`. Ids read back from the DOM are not
+    // attacker controlled markup, but an id holding a quote, a backslash or a
+    // newline still produces a malformed selector that makes jQuery throw.
+    // `$.escapeSelector()` only exists in jQuery 3+, and this plugin supports
+    // jQuery 1.12+, so escape the few characters a quoted attribute value cares
+    // about ourselves.
+    // See https://github.com/swisnl/jQuery-contextMenu/issues/811
+    function escapeAttributeValue(value) {
+        return String(value)
+            .replace(/["\\]/g, '\\$&')
+            .replace(/[\n\r\f]/g, function (character) {
+                return '\\' + character.charCodeAt(0).toString(16) + ' ';
+            });
+    }
+
     // remove every `elementSelectors` entry (and its bound handler) registered
     // under the given namespace. Used to tear down direct element/jQuery-object
     // bindings from any destroy code path, regardless of whether the menu was
@@ -2938,7 +2961,7 @@
                     $('menu[type="context"]').each(function () {
                         if (this.id) {
                             $.contextMenu({
-                                selector: '[contextmenu=' + this.id + ']',
+                                selector: '[contextmenu="' + escapeAttributeValue(this.id) + '"]',
                                 items: $.contextMenu.fromMenu(this)
                             });
                         }
@@ -3011,8 +3034,23 @@
     };
 
 // find <label for="xyz">
+// `.text()` and not `.val()`: a <label> has no `value` property, so the value
+// getter always returned "" and every imported input silently fell back to its
+// `name` attribute. See https://github.com/swisnl/jQuery-contextMenu/issues/811
     function inputLabel(node) {
-        return (node.id && $('label[for="' + node.id + '"]').val()) || node.name;
+        var text;
+
+        if (node.id) {
+            // an input may legally have several labels; the first one wins
+            // rather than all of them being concatenated together.
+            text = trimText($('label[for="' + escapeAttributeValue(node.id) + '"]').first().text());
+
+            if (text) {
+                return text;
+            }
+        }
+
+        return node.name;
     }
 
 // convert <menu> to items object
@@ -3030,7 +3068,7 @@
 
             // extract <label><input>
             if (nodeName === 'label' && $node.find('input, textarea, select').length) {
-                label = $node.text();
+                label = trimText($node.text());
                 $node = $node.children().first();
                 node = $node.get(0);
                 nodeName = node.nodeName.toLowerCase();
diff --git a/test/unit/issue-811-input-label.test.js b/test/unit/issue-811-input-label.test.js
new file mode 100644
index 00000000..3cc872cd
--- /dev/null
+++ b/test/unit/issue-811-input-label.test.js
@@ -0,0 +1,216 @@
+// Regression tests for https://github.com/swisnl/jQuery-contextMenu/issues/811
+//
+// `inputLabel()` is the fallback name for inputs imported from an HTML5
+// `<menu>`. It used to read the associated `<label>` with `.val()`, but a
+// `<label>` has no `value` property, so the getter always returned "" and the
+// import silently fell back to the input's `name` attribute. Every assertion
+// below goes through `$.contextMenu.fromMenu()` (or the `html5` polyfill), so
+// the real import path is exercised rather than the private helper.
+
+function issue811BuildMenu(html) {
+  return $('<menu type="context"></menu>')
+    .html(html)
+    .appendTo($('#qunit-fixture'));
+}
+
+function issue811FirstItem(html) {
+  var items = $.contextMenu.fromMenu(issue811BuildMenu(html));
+  var keys = [];
+
+  $.each(items, function(key) {
+    keys.push(key);
+  });
+
+  return items[keys[0]];
+}
+
+QUnit.module('issue 811 - imported inputs use their associated label', {
+  afterEach: function() {
+    $.contextMenu('destroy');
+    var $fixture = $('#qunit-fixture');
+    if ($fixture.length) {
+      $fixture.html('');
+    }
+  }
+});
+
+QUnit.test('a text input is named after its <label for="...">', function(assert) {
+  var item = issue811FirstItem(
+    '<label for="issue-811-text">My Label</label>' +
+    '<input id="issue-811-text" name="fallbackname" type="text" value="v">'
+  );
+
+  assert.equal(item.type, 'text', 'the input was imported as a text item');
+  assert.equal(item.name, 'My Label', 'the label text is used, not the name attribute');
+});
+
+QUnit.test('a checkbox is named after its <label for="...">', function(assert) {
+  var item = issue811FirstItem(
+    '<label for="issue-811-check">Check me</label>' +
+    '<input id="issue-811-check" name="fallbackname" type="checkbox">'
+  );
+
+  assert.equal(item.type, 'checkbox', 'the input was imported as a checkbox item');
+  assert.equal(item.name, 'Check me', 'the label text is used, not the name attribute');
+});
+
+QUnit.test('a radio is named after its <label for="...">', function(assert) {
+  var item = issue811FirstItem(
+    '<label for="issue-811-radio">Pick me</label>' +
+    '<input id="issue-811-radio" name="fallbackname" type="radio" value="a">'
+  );
+
+  assert.equal(item.type, 'radio', 'the input was imported as a radio item');
+  assert.equal(item.name, 'Pick me', 'the label text is used, not the name attribute');
+});
+
+QUnit.test('a select is named after its <label for="...">', function(assert) {
+  var item = issue811FirstItem(
+    '<label for="issue-811-select">Choose one</label>' +
+    '<select id="issue-811-select" name="fallbackname"><option value="a">A</option></select>'
+  );
+
+  assert.equal(item.type, 'select', 'the element was imported as a select item');
+  assert.equal(item.name, 'Choose one', 'the label text is used, not the name attribute');
+});
+
+QUnit.test('a textarea is named after its <label for="...">', function(assert) {
+  var item = issue811FirstItem(
+    '<label for="issue-811-textarea">Say something</label>' +
+    '<textarea id="issue-811-textarea" name="fallbackname"></textarea>'
+  );
+
+  assert.equal(item.type, 'textarea', 'the element was imported as a textarea item');
+  assert.equal(item.name, 'Say something', 'the label text is used, not the name attribute');
+});
+
+QUnit.test('surrounding whitespace in the label is trimmed', function(assert) {
+  var item = issue811FirstItem(
+    '<label for="issue-811-ws">\n    Spaced out\n  </label>' +
+    '<input id="issue-811-ws" name="fallbackname" type="text">'
+  );
+
+  assert.equal(item.name, 'Spaced out', 'the label text is trimmed');
+});
+
+QUnit.test('an input without a label falls back to its name attribute', function(assert) {
+  var item = issue811FirstItem('<input id="issue-811-nolabel" name="fallbackname" type="text">');
+
+  assert.equal(item.name, 'fallbackname', 'the name attribute is used when there is no label');
+});
+
+QUnit.test('an input without an id falls back to its name attribute', function(assert) {
+  var item = issue811FirstItem('<input name="fallbackname" type="text">');
+
+  assert.equal(item.name, 'fallbackname', 'the name attribute is used when there is no id');
+});
+
+QUnit.test('an empty or whitespace-only label falls back to the name attribute', function(assert) {
+  var item = issue811FirstItem(
+    '<label for="issue-811-empty">   </label>' +
+    '<input id="issue-811-empty" name="fallbackname" type="text">'
+  );
+
+  assert.equal(item.name, 'fallbackname', 'a label with no text does not blank out the item name');
+});
+
+QUnit.test('a label outside the menu is still found', function(assert) {
+  $('<label for="issue-811-outside">Outside label</label>').appendTo($('#qunit-fixture'));
+
+  var item = issue811FirstItem('<input id="issue-811-outside" name="fallbackname" type="text">');
+
+  assert.equal(item.name, 'Outside label', 'a label anywhere in the document is used');
+});
+
+QUnit.test('a wrapping <label> still wins over the name attribute and is trimmed', function(assert) {
+  var item = issue811FirstItem(
+    '<label>\n  Wrapped\n  <input id="issue-811-wrapped" name="fallbackname" type="text">\n</label>'
+  );
+
+  assert.equal(item.name, 'Wrapped', 'the wrapping label text is used and trimmed');
+});
+
+QUnit.test('a whitespace-only wrapping <label> falls back to the name attribute', function(assert) {
+  var item = issue811FirstItem(
+    '<label>\n  <input id="issue-811-wrapped-empty" name="fallbackname" type="text">\n</label>'
+  );
+
+  assert.equal(item.name, 'fallbackname', 'a wrapping label with no text does not blank out the item name');
+});
+
+// The id used to be concatenated straight into a selector, so an id holding a
+// CSS metacharacter produced a malformed selector and threw.
+QUnit.test('an id containing CSS metacharacters does not break the label lookup', function(assert) {
+  var weirdId = 'issue-811.weird:id[1]';
+  var item = issue811FirstItem(
+    '<label for="' + weirdId + '">Weird id label</label>' +
+    '<input id="' + weirdId + '" name="fallbackname" type="text">'
+  );
+
+  assert.equal(item.name, 'Weird id label', 'the label is found for an id full of metacharacters');
+});
+
+QUnit.test('an id containing a quote does not break the label lookup', function(assert) {
+  var quotedId = 'issue-811"quoted';
+  var $label = $('<label></label>').attr('for', quotedId).text('Quoted id label');
+  var $input = $('<input type="text" name="fallbackname">').attr('id', quotedId);
+  var $menu = $('<menu type="context"></menu>').append($label, $input).appendTo($('#qunit-fixture'));
+
+  var items = $.contextMenu.fromMenu($menu);
+
+  assert.equal(items.key1.name, 'Quoted id label', 'the label is found for an id containing a quote');
+});
+
+QUnit.module('issue 811 - html5 polyfill', {
+  afterEach: function() {
+    $.contextMenu('destroy');
+    var $fixture = $('#qunit-fixture');
+    if ($fixture.length) {
+      $fixture.html('');
+    }
+  }
+});
+
+// `$.contextMenu('html5')` registers `[contextmenu=<id>]` as the menu's
+// selector, which is equally unsafe for an id holding a CSS metacharacter.
+QUnit.test('a <menu> whose id contains CSS metacharacters is registered', function(assert) {
+  var menuId = 'issue-811.menu:id';
+
+  $('<menu type="context"><command label="Rotate"></command></menu>')
+    .attr('id', menuId)
+    .appendTo($('#qunit-fixture'));
+  var $trigger = $('<span>trigger</span>')
+    .attr('contextmenu', menuId)
+    .appendTo($('#qunit-fixture'));
+
+  $.contextMenu('html5', true);
+
+  $trigger.trigger($.Event('contextmenu'));
+
+  var $menu = $('ul.context-menu-list:visible');
+  assert.equal($menu.length, 1, 'the polyfilled menu opened for a trigger with a metacharacter id');
+  assert.equal($menu.find('.context-menu-item').first().text(), 'Rotate', 'the imported command is shown');
+});
+
+QUnit.test('an input imported through the html5 polyfill shows its label', function(assert) {
+  var menuId = 'issue-811-html5-menu';
+
+  $('<menu type="context">' +
+      '<label for="issue-811-html5-input">Polyfilled label</label>' +
+      '<input id="issue-811-html5-input" name="fallbackname" type="text">' +
+    '</menu>')
+    .attr('id', menuId)
+    .appendTo($('#qunit-fixture'));
+  var $trigger = $('<span>trigger</span>')
+    .attr('contextmenu', menuId)
+    .appendTo($('#qunit-fixture'));
+
+  $.contextMenu('html5', true);
+
+  $trigger.trigger($.Event('contextmenu'));
+
+  var $menu = $('ul.context-menu-list:visible');
+  assert.equal($menu.length, 1, 'the polyfilled menu opened');
+  assert.ok($menu.text().indexOf('Polyfilled label') > -1, 'the input is labelled with the label text');
+  assert.equal($menu.text().indexOf('fallbackname'), -1, 'the name attribute is not shown');
+});

From 921c4be7c60988bfbf4183676e283b5da826a0bf Mon Sep 17 00:00:00 2001
From: bjorn <bjorn@swis.nl>
Date: Wed, 29 Jul 2026 21:29:31 +0200
Subject: [PATCH 2/3] docs: flag the imported-input naming change in the
 changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0a307f0..b299ab7f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,7 +27,7 @@
 * A `select`'s phantom mousedown is no longer treated as an outside click (fixes #744)
 * A re-dispatched layer click now targets the element actually clicked (fixes #771)
 * Guard against undefined `e.data` in the contextmenu handler (fixes #777)
-* Inputs imported from an HTML5 `<menu>` are named after their `<label>` again instead of falling back to the `name` attribute (fixes #811)
+* Inputs imported from an HTML5 `<menu>` are named after their `<label>` again instead of falling back to the `name` attribute (fixes #811). Note that this is a visible change: a labelled input imported through `$.contextMenu.fromMenu()` or `$.contextMenu('html5')` now shows its label text where it used to show its `name` attribute. Inputs without a label, without an id, or with an empty label keep showing the `name` attribute exactly as before.
 
 #### Documentation
 

From 0a6bc6781f9231bcffedb8ad73de1a944b43c376 Mon Sep 17 00:00:00 2001
From: bjorn <bjorn@swis.nl>
Date: Wed, 29 Jul 2026 21:44:30 +0200
Subject: [PATCH 3/3] revert: keep the html5 polyfill's [contextmenu=id]
 selector unquoted

That selector string doubles as the registration key (namespaces[o.selector]),
so quoting it would silently stop matching for anyone passing the old literal
into $.contextMenu('destroy'/'update', ...). Backwards compatibility wins over
the hygiene fix; the escaping stays where it is safe, on the label[for="..."]
lookup, which is built and consumed internally and never stored.
---
 src/jquery.contextMenu.js               | 10 +++++++++-
 test/unit/issue-811-input-label.test.js | 13 +++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/jquery.contextMenu.js b/src/jquery.contextMenu.js
index 027df531..625c4862 100644
--- a/src/jquery.contextMenu.js
+++ b/src/jquery.contextMenu.js
@@ -2961,7 +2961,15 @@
                     $('menu[type="context"]').each(function () {
                         if (this.id) {
                             $.contextMenu({
-                                selector: '[contextmenu="' + escapeAttributeValue(this.id) + '"]',
+                                // deliberately left unquoted/unescaped: this
+                                // selector string doubles as the registration
+                                // key (`namespaces[o.selector]`), so quoting it
+                                // would silently stop matching for anyone
+                                // passing the old literal back into
+                                // `$.contextMenu('destroy'/'update', ...)`.
+                                // See the secondary item in
+                                // https://github.com/swisnl/jQuery-contextMenu/issues/811
+                                selector: '[contextmenu=' + this.id + ']',
                                 items: $.contextMenu.fromMenu(this)
                             });
                         }
diff --git a/test/unit/issue-811-input-label.test.js b/test/unit/issue-811-input-label.test.js
index 3cc872cd..475b3f74 100644
--- a/test/unit/issue-811-input-label.test.js
+++ b/test/unit/issue-811-input-label.test.js
@@ -172,9 +172,14 @@ QUnit.module('issue 811 - html5 polyfill', {
 });
 
 // `$.contextMenu('html5')` registers `[contextmenu=<id>]` as the menu's
-// selector, which is equally unsafe for an id holding a CSS metacharacter.
-QUnit.test('a <menu> whose id contains CSS metacharacters is registered', function(assert) {
-  var menuId = 'issue-811.menu:id';
+// selector. That string is deliberately left unquoted and unescaped: it doubles
+// as the registration key (`namespaces[o.selector]`), so quoting it would
+// silently break anyone passing the old literal back into
+// `$.contextMenu('destroy'/'update', ...)`. An id holding a CSS metacharacter
+// therefore still throws here, which is a separate concern from the label
+// lookup this issue is about - see the secondary item in #811.
+QUnit.test('a <menu> is registered and opens through the polyfill', function(assert) {
+  var menuId = 'issue-811-menu-id';
 
   $('<menu type="context"><command label="Rotate"></command></menu>')
     .attr('id', menuId)
@@ -188,7 +193,7 @@ QUnit.test('a <menu> whose id contains CSS metacharacters is registered', functi
   $trigger.trigger($.Event('contextmenu'));
 
   var $menu = $('ul.context-menu-list:visible');
-  assert.equal($menu.length, 1, 'the polyfilled menu opened for a trigger with a metacharacter id');
+  assert.equal($menu.length, 1, 'the polyfilled menu opened for its trigger');
   assert.equal($menu.find('.context-menu-item').first().text(), 'Rotate', 'the imported command is shown');
 });