Skip to content

Fix/dropdown race condition#749

Open
fIa5h wants to merge 2 commits intoruilisi:masterfrom
fIa5h:fix/dropdown-race-condition
Open

Fix/dropdown race condition#749
fIa5h wants to merge 2 commits intoruilisi:masterfrom
fIa5h:fix/dropdown-race-condition

Conversation

@fIa5h
Copy link
Copy Markdown

@fIa5h fIa5h commented Nov 21, 2025

This PR fixes a "Cannot update a component while rendering a different component" error and a race condition that occurs when selecting an item from the dropdown.

Changes:

  1. Removed direct mutation of the selected state array.
  2. Removed the redundant setSelected call inside the setContext recipe (which was causing the React warning).
  3. Added logic to automatically close the dropdown (dataVerificationDropDownList = false) when in single-select mode, ensuring it unmounts immediately after selection.

The original code mutated the state directly and failed to close the dropdown in single-select mode:

// BEFORE
onClick: function onClick() {
  setContext(function (ctx) {
    var arr = selected; // Direct reference to state
    // ... mutation ...
    arr.push(v);
    // ...
    setSelected(arr); // Redundant state update inside render cycle
    setDropcownValue(ctx, v, arr);
  });
}

The patched code clones the array and handles unmounting:

// AFTER
onClick: function onClick() {
  setContext(function (ctx) {
    var arr = [].concat(selected); // Clone array
    // ... mutation ...
    arr.push(v);
    // ...
    // setSelected(arr); // Removed
    setDropcownValue(ctx, v, arr);
    
    // Auto-close for single select
    if (!isMul) {
      ctx.dataVerificationDropDownList = false;
    }
  });
}

AFAIK setContext uses Immer to produce the next state. The callback function passed to it is effectively a reducer. Calling a React state setter (setSelected) inside a reducer or state updater function is a violation of React's purity rules and explains the 'Cannot update component while rendering another' error.

Note on Multi-select UX: I removed the setSelected call because it was causing a side-effect inside the setContext reducer. I verified that the useEffect hook correctly syncs the local state with the global context, and the checkmark updates appear responsive in testing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant