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

Open
QDyanbing wants to merge 1 commit into
base: master
Choose a base branch
from
Open

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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);

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 = [];
});
}
Comment on lines 377 to +385
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