') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); Clicking the non-input area of a select inside a Bard set node-selects the whole set · Issue #15207 · statamic/cms · GitHub
Skip to content

Clicking the non-input area of a select inside a Bard set node-selects the whole set #15207

Open
Open
Clicking the non-input area of a select inside a Bard set node-selects the whole set#15207
Labels
bard

Description

@5k18a
5k18a
opened on Aug 17, 2026

Bug description

Clicking a select field inside a Bard set — specifically the non-input parts of the custom dropdown widget (the value area, the chevron, its padding) — node-selects the entire set: the whole set card gets the selection highlight, as if all of its content was selected. The dropdown itself still opens, so the field remains usable, but the visual "everything is selected" state is confusing for editors.

More importantly, while the set is node-selected, the DOM selection spans the whole set (as described in #15049), so pressing a key at that moment replaces/deletes the entire set (recoverable with Ctrl+Z, but easy to trigger accidentally right after interacting with a dropdown).

Expected: clicks anywhere on an interactive form control inside a set (including the div-based parts of the custom select widget) should be treated like clicks on inputs — they should not create a node selection of the set.

The mechanism matches what #15049 documents ("clicking a non-interactive area inside a set makes ProseMirror node-select it; that node selection is backed by a real DOM selection spanning the whole set"). That PR fixed the dragstart symptom; the click-through-form-widget path still node-selects.

How to reproduce

  1. Create a Bard field with a set that contains a select field with a few options (e.g. a "Display type" select).
  2. Edit an entry in the CP, add the set to the Bard field.
  3. Click the select — aim at the value area or the chevron rather than typing into it.
  4. The whole set card gets highlighted (node selection) while the dropdown opens.
  5. With the set node-selected, press any printable key or Backspace — the whole set is replaced/removed.

Logs

(no relevant logs — CP/editor front-end behaviour)

Environment

EnvironmentLaravel Version: 13.19.0PHP Version: 8.4.24Composer Version: 2.8.8Environment: localDebug Mode: ENABLEDMaintenance Mode: OFFTimezone: UTCLocale: enCacheConfig: NOT CACHEDEvents: NOT CACHEDRoutes: NOT CACHEDViews: CACHEDDriversBroadcasting: logCache: fileDatabase: sqliteLogs: stack / singleMail: smtpQueue: syncSession: fileStoragepublic/storage: LINKEDStatamicAddons: 10License Key: SetSites: 13 (Polski, Čeština, Dansk, and 10 more)Stache Watcher: Enabled (auto)Static Caching: DisabledVersion: 6.27.1 PROStatamic Addons5k18a/blog-internal-links: 0.5.0aryehraber/statamic-captcha: 1.17.0chrisvasey/statamic-boost: 1.2.1el-schneider/statamic-magic-translator: 0.3.0eminos/statamic-iconify: 2.1.0skalisty/ai-chat: 0.4.1skalisty/comments: 0.2.4skalisty/wysiwyg-html-fieldtype: 1.1.0statamic/seo-pro: 7.13.1superinteractive/statamic-super-admin-toolbar: 2.1.1

Installation

Existing Laravel app

Additional details

  • Multisite (13 sites). Observed on 6.27.1 after upgrading from 6.26.0, but comparing the two tags, Set.js/Set.vue click handling looks unchanged, so it may simply be more noticeable now rather than a fresh regression.
  • Reproduced with plain select fields defined in a fieldset imported into the Bard set (no custom fieldtypes involved in the affected set).

Metadata

Metadata

Assignees

No one assigned

    Labels

    bard

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions