PRO: autocomplete single-select crashes with TypeError on item selection (race condition in Ls feature)

Bắt đầu bằng cách tìm mã nguồn tương ứng với logic đã minify của Ls và Wt trong node_modules/@formkit/pro/index.mjs, khoảng dòng 19, col 25262. Tái hiện luồng autocomplete chọn một mục bằng một hàm options hoặc optionLoader bất đồng bộ, sau đó xác minh rằng việc chọn một mục không còn gây ra lỗi khi dropdown đóng trước khi các lựa chọn được cập nhật.

Description

When a user types in a single-select autocomplete input and then selects an item from the dropdown, a TypeError is thrown:

Uncaught TypeError: Cannot read properties of undefined (reading 'label')
    at t (index.mjs:19:25262)
    at Object.listener (index.mjs:19:25658)

Steps to Reproduce

1. Use a single-select <FormKit type="autocomplete" /> with an options or optionLoader function
2. Type a search string (so the DOM input has text, i.e. inputStd.length > 0)
3. Wait for results to load in the dropdown
4. Click an item from the dropdown list

Root Cause

In FormKit Pro 0.130.0, the Ls(e) feature (applied to all single-select autocomplete inputs) registers a prop:expanded listener that calls t(e) when the dropdown closes:

function t(e) {
  0 === e.props.inputStd.length
    ? (e.props.inputText = "", e.props.searchValue = "")
    : (e.props.inputText = e.props.selections[0].label,   // ← CRASH HERE
       e.props.searchValue = e.props.selections[0].label)
}

The crash happens because of a race condition:

1. User clicks a list item → Wt(e, option) runs:
   • e.props.option = option ✅ (synchronous)
   • e.input(id) ← async (scheduled via setTimeout)
2. The click (or document-level click listener) closes the dropdown synchronously: e.props.expanded = false
3. prop:expanded fires → t(e) runs:
   • e.props.inputStd.length > 0 (search text still in DOM — e.input() hasn't processed yet)
   • e.props.selections[0] → undefined (selections updated asynchronously, not yet done)
   • → TypeError: Cannot read properties of undefined (reading 'label')

The prop:selections listener inside Ls(e) would normally update inputText = selections[0].label, but it hasn't fired yet because e.input() is async.

Affected Code

node_modules/@formkit/pro/index.mjs, line 19, approx col 25262 (minified):

// Ls(e) - applied to ALL single-select autocomplete (never multiple)
function t(e) {
  0 === e.props.inputStd.length
    ? (e.props.inputText = "", e.props.searchValue = "")
    : (e.props.inputText = e.props.selections[0].label,  // no guard!
       e.props.searchValue = e.props.selections[0].label)
}

Suggested Fix

Guard selections[0] before accessing .label:

function t(e) {
  if (0 === e.props.inputStd.length) {
    e.props.inputText = "";
    e.props.searchValue = "";
  } else if (e.props.selections[0]) {   // ← add guard
    e.props.inputText = e.props.selections[0].label;
    e.props.searchValue = e.props.selections[0].label;
  }
  // else: option was just selected but e.input() is still pending (async);
  // selections will be populated via prop:selections shortly
}

Alternatively, call e.input(value, false) (synchronous) inside Wt() so selections is updated before any click handlers fire.

Workaround (used until fix is released)

Add a FormKit plugin that intercepts prop:option (set synchronously by Wt) and clears inputText before the async prop:selections fires. This forces inputStd.length === 0 when t(e) runs, steering it into the safe branch:

function fixAutocompletePropExpandedCrash(node) {
  if (node.props.type !== 'autocomplete' || node.props.multiple) return false
  node.on('prop:option', ({ payload: option }) => {
    if (option && !node.props.selections?.length) {
      node.props.inputText = ''
    }
  })
  return false
}

Environment

• @formkit/pro version: 0.130.0 (latest stable)
• @formkit/vue: 1.6.9
• Vue 3 / Nuxt 4
• Reproducible with any async options function (debounced search, API call, etc.)