Hide already-selected option values from variant dropdowns

[brozek95]

https://linear.app/vendo/issue/V-3161/product-form-option-values-can-select-already-added-values

Note

^{Cursor Bugbot is generating a summary for commit c048085. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Bugbot Free Tier Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

Bugbot Autofix prepared fixes for both issues found in the latest run.

• ✅ Fixed: Stale preloaded options reappear after option name change
  • I now refresh preloadedOptionsValue from the currently loaded TomSelect options before handling selection changes so stale option-type values are not reintroduced.
• ✅ Fixed: Event listener accumulates on controller reconnect
  • I replaced the anonymous listener with a stored handler and remove it in disconnect() to prevent duplicate listeners after reconnects.

Or push these changes by commenting:

@cursor push 35d59c5935

Preview (35d59c5935)

diff --git a/spree/admin/app/javascript/spree/admin/controllers/multi_tom_select_controller.js b/spree/admin/app/javascript/spree/admin/controllers/multi_tom_select_controller.js
--- a/spree/admin/app/javascript/spree/admin/controllers/multi_tom_select_controller.js
+++ b/spree/admin/app/javascript/spree/admin/controllers/multi_tom_select_controller.js
@@ -12,11 +12,16 @@
     this.element.reset = this.reset.bind(this)
     this.element.values = this.values.bind(this)
     this.element.setValues = this.setValues.bind(this)
-    this.element.addEventListener('tomSelectInitialized', () => this.refreshAvailableOptions())
+    this.tomSelectInitializedHandler = this.refreshAvailableOptions.bind(this)
+    this.element.addEventListener('tomSelectInitialized', this.tomSelectInitializedHandler)
 
     this.setValues(this.preloadedValuesValue)
   }
 
+  disconnect() {
+    this.element.removeEventListener('tomSelectInitialized', this.tomSelectInitializedHandler)
+  }
+
   reset(addBlankSelect = true) {
     this.selectTargets.forEach((container) => container.remove())
 
@@ -42,6 +47,7 @@
 
   handleSelect(event) {
     const ts = event.target.tomselect
+    this.refreshPreloadedOptions()
 
     if (ts && ts.getValue().length > 0 && (this.lastSelect === event.target || this.selectTargets.length === 1)) {
       this.addSelect()
@@ -53,6 +59,29 @@
     this.refreshAvailableOptions()
   }
 
+  refreshPreloadedOptions() {
+    const options = new Map()
+
+    this.selectTargets.forEach((target) => {
+      const ts = target.querySelector('select')?.tomselect
+      if (!ts) return
+
+      Object.values(ts.options).forEach((option) => {
+        const optionId = String(option.id)
+        if (!options.has(optionId)) {
+          options.set(optionId, {
+            id: optionId,
+            name: option.name || option.text
+          })
+        }
+      })
+    })
+
+    if (options.size > 0) {
+      this.preloadedOptionsValue = Array.from(options.values())
+    }
+  }
+
   removeSelect(container) {
     if (this.selectTargets.length > 1) {
       const select = container.querySelector('select')

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.73%. Comparing base (b31b3ed) to head (f308a04).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #13721   +/-   ##
=======================================
  Coverage   89.73%   89.73%           
=======================================
  Files         819      819           
  Lines       24045    24045           
=======================================
  Hits        21577    21577           
  Misses       2468     2468           

Flag	Coverage Δ
admin	88.68% <ø> (ø)
api	95.76% <ø> (ø)
core	89.15% <ø> (ø)
emails	91.77% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Components	Coverage Δ
Core	89.15% <ø> (ø)
API	95.76% <ø> (ø)
Admin	88.68% <ø> (ø)
Emails	91.77% <ø> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.