Skip to content

fix(trigger): avoid render-based reset for interaction-level deduplication #601

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zombieJ merged 2 commits into from
Jan 4, 2026
+158 −16
Merged

fix(trigger): avoid render-based reset for interaction-level deduplication #601

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67e931e
fix(trigger): avoid render-based reset for interaction-level deduplic…
QDyanbing Dec 30, 2025
5431577
fix(trigger): dedupe open change callbacks
QDyanbing Jan 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -372,9 +372,18 @@ export function generateTrigger(
openRef.current = mergedOpen;

const lastTriggerRef = React.useRef<boolean[]>([]);
lastTriggerRef.current = [];
const resetScheduledRef = React.useRef(false);
Copy link
Member

@zombieJ zombieJ Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

6b09c6f

这个直接回滚掉是不是就好了，也不用支持 React 16 了


const internalTriggerOpen = useEvent((nextOpen: boolean) => {
// `lastTriggerRef` is for interaction-level deduplication; do not reset it on render.
if (!resetScheduledRef.current) {
resetScheduledRef.current = true;
queueMicrotask(() => {
resetScheduledRef.current = false;
lastTriggerRef.current = [];
});
}
Copy link

@coderabbitai coderabbitai bot Dec 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# First, let's examine the code context around lines 377-385
wc -l src/index.tsx

Repository: react-component/trigger

Length of output: 84

🏁 Script executed:

# Read the specific lines in context
sed -n '370,395p' src/index.tsx

Repository: react-component/trigger

Length of output: 982

🏁 Script executed:

# Search for queueMicrotask usage in the file
rg -n "queueMicrotask" src/index.tsx -A 3 -B 3

Repository: react-component/trigger

Length of output: 396

🌐 Web query:

queueMicrotask browser compatibility and support

💡 Result:

Short summary

  • Native support: modern browsers and runtimes — Chrome 71+, Firefox 69+, Safari 12.1+, Edge (Chromium) 79+, Opera 58+, Node.js 11+. Also available in Web Workers. [1][2]
  • Global usage (Can I use): ~95% of users covered; older browsers (IE, very old mobile/desktop versions) lack support. [2]
  • Feature-detect: typeof queueMicrotask === 'function'. If missing, use a polyfill (core-js provides one) or fallback to Promise.resolve().then(...). [1][3]

Sources

  • MDN Web Docs — queueMicrotask (Window / WorkerGlobalScope). [1]
  • Can I use — queueMicrotask support table. [2]
  • Polyfill note / core-js reference. [3]

🏁 Script executed:

# Check package.json for browser target configuration
cat package.json | head -50

Repository: react-component/trigger

Length of output: 1356

🏁 Script executed:

# Search for any polyfill or compatibility handling for queueMicrotask
rg "queueMicrotask|Promise.*resolve.*then|polyfill" --type-list | head -20

Repository: react-component/trigger

Length of output: 456

🏁 Script executed:

# Check if there's any Babel configuration that might handle polyfills
ls -la | grep -E "babel|tsconfig|\.browserlistrc"

Repository: react-component/trigger

Length of output: 130

🏁 Script executed:

# Search for browser targets in tsconfig or similar
find . -maxdepth 2 -name "tsconfig*.json" -o -name ".babelrc*" -o -name "browserslist"

Repository: react-component/trigger

Length of output: 82

🏁 Script executed:

# Check tsconfig.json
cat tsconfig.json

Repository: react-component/trigger

Length of output: 441

🏁 Script executed:

# Search for polyfill or queueMicrotask usage more broadly
rg "queueMicrotask" -B 3 -A 3

Repository: react-component/trigger

Length of output: 466

🏁 Script executed:

# Check if there's any polyfill setup
rg "polyfill|Promise.*then|core-js" --type ts --type tsx

Repository: react-component/trigger

Length of output: 94

🏁 Script executed:

# Look for any global setup or index files that might handle compatibility
cat src/index.tsx | head -100

Repository: react-component/trigger

Length of output: 3214

去重逻辑正确，出色地解决了受控模式下的问题！

使用 queueMicrotask 是解决交互级别去重的理想方案：

  • ✅ 确保同一交互批次内的多次事件（如 mouseenter + pointerenter）正确共享去重状态
  • ✅ 保证不同用户交互之间的去重状态被及时清理，避免误判
  • ✅ 不依赖组件重渲染，完美解决受控模式下的去重问题

微任务在当前同步代码完成后、下一次事件循环前执行，这正好符合交互级别去重的时序需求。

浏览器兼容性注意： queueMicrotask 在现代浏览器中支持良好（Chrome 71+、Firefox 69+、Safari 12.1+、Edge 79+），覆盖约 95% 的用户。若需支持更旧的浏览器，需添加 polyfill（可使用 core-js 或 Promise.resolve().then() 作为备选）。当前项目 tsconfig 的 target 为 esnext，说明已假定目标用户使用现代浏览器。

🤖 Prompt for AI Agents 
In src/index.tsx around lines 377-385, the current use of queueMicrotask may
break in older browsers; replace direct queueMicrotask calls with a small
cross-platform microtask helper (e.g., const scheduleMicrotask = (fn: () =>
void) => (typeof queueMicrotask === 'function' ? queueMicrotask(fn) :
Promise.resolve().then(fn))); then use scheduleMicrotask(() => {
resetScheduledRef.current = false; lastTriggerRef.current = []; }); and add the
minimal TypeScript typing for the helper so the code compiles without changing
target or adding large polyfills.


setInternalOpen(nextOpen);

// Enter or Pointer will both trigger open state change
Expand Down