[WIKI-823] fix: callout element emoji search

[iam-vipin]

Description

this PR preventing unwanted event propagation and ensuring the search input is always enabled and focused.

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Screenshots and Media (if applicable)

Screen.Recording.2025-11-30.at.5.24.57.PM.mov

Test Scenarios

References

Summary by CodeRabbit

• Bug Fixes
  • Prevented emoji picker interactions from propagating to surrounding UI, avoiding unintended behavior.
  • Search input now automatically receives focus when the emoji picker opens for faster searching.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Popover event propagation is blocked inside the emoji picker panel and the emoji search input now automatically receives focus when the picker mounts.

Changes

Cohort / File(s)	Summary
Emoji picker interaction & focus packages/propel/src/emoji-icon-picker/emoji-picker.tsx, packages/propel/src/emoji-icon-picker/emoji/emoji.tsx	Added stop-propagation handlers on Popover.Panel (onMouseDown, onClick, onFocus, onKeyDown — Tab ignored, Escape closes) to prevent bubbling; added searchWrapperRef + useEffect to locate, enable, and focus the emoji search input on mount.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Focus attention on:
  • The onKeyDown handler logic (Tab vs Escape behavior) in emoji-picker.tsx.
  • The query/select logic used to find and enable the input inside searchWrapperRef in emoji/emoji.tsx.
  • Any potential accessibility implications of programmatic focus.

Poem

🐰 I hopped in to tweak where events run free,
Closed tiny leaks so clicks stay inside me.
I nudged the search box to wake on first sight,
Now finding emojis feels simply delight! 🎀

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main issue being fixed: emoji search functionality in the callout element. The ticket reference [WIKI-823] and concise description align with the changeset.
Description check	✅ Passed	The description covers the main objectives and includes type of change with a screenshot. However, the Test Scenarios and References sections are incomplete or missing, which are template sections.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-emoji_search_modal

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1552d4c and 0216481.

📒 Files selected for processing (1)

• packages/propel/src/emoji-icon-picker/emoji-picker.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/propel/src/emoji-icon-picker/emoji-picker.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[makeplane]

Linked to Plane Work Item(s)

• [WIKI-823] Callout Element: Emoji search broken

This comment was auto-generated by Plane

[Copilot]

Pull request overview

This PR aims to fix issues with the emoji search functionality in the callout element emoji picker by preventing unwanted event propagation and ensuring the search input is always enabled and focused when the picker opens.

Key Changes

• Added auto-focus logic to the emoji search input using useEffect and DOM manipulation
• Added event propagation prevention (stopPropagation) for mouseDown, click, focus, and keyDown events on the emoji picker popover panel
• Added a ref to the search wrapper div to enable DOM querying for the input element

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.

File	Description
packages/propel/src/emoji-icon-picker/emoji/emoji.tsx	Adds useEffect hook with DOM manipulation to force-enable and focus the search input, includes leading whitespace formatting issue
packages/propel/src/emoji-icon-picker/emoji-picker.tsx	Adds broad event propagation prevention on the popover panel for multiple event types

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/propel/src/emoji-icon-picker/emoji/emoji.tsx (1)

18-22: Consider using a more robust ref pattern for input access.

The querySelector("input") approach is fragile and tightly couples this component to the internal DOM structure of EmojiPicker.Search from the frimousse library. If the library updates its component structure, this selector could break.

Recommended approach:

If the frimousse library exposes a ref forwarding mechanism for EmojiPicker.Search, use it directly:

const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  if (inputRef.current && !searchDisabled) {
    inputRef.current.focus();
  }
}, [searchDisabled]);

// In JSX
<EmojiPicker.Search
  ref={inputRef}
  placeholder={searchPlaceholder}
  disabled={searchDisabled}
  className="..."
/>

If the library doesn't support ref forwarding, the current querySelector approach is acceptable but document the dependency on the library's internal structure.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 123f59e and 1552d4c.

📒 Files selected for processing (2)

• packages/propel/src/emoji-icon-picker/emoji-picker.tsx (1 hunks)
• packages/propel/src/emoji-icon-picker/emoji/emoji.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,mts,cts}

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.{ts,tsx,mts,cts}: Use const type parameters for more precise literal inference in TypeScript 5.0+
Use the satisfies operator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicit is return types in filter/check functions
Use NoInfer<T> utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing in switch(true) blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacy experimentalDecorators
Use using declarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Use with { type: "json" } for import attributes; avoid deprecated assert syntax (TypeScript 5.3/5.8+)
Use import type explicitly when importing types to ensure they are erased during compilation, respecting verbatimModuleSyntax flag
Use .ts, .mts, .cts extensions in import type statements (TypeScript 5.2+)
Use import type { Type } from "mod" with { "resolution-mode": "import" } for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize new Set methods like union, intersection, etc., when available (TypeScript 5.5+)
Use Object.groupBy / Map.groupBy standard methods for grouping instead of external libraries (TypeScript 5.4+)
Use Promise.withResolvers() for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted, toSpliced, with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields via super in classes (TypeScript 5....

Files:

• packages/propel/src/emoji-icon-picker/emoji-picker.tsx
• packages/propel/src/emoji-icon-picker/emoji/emoji.tsx

🧬 Code graph analysis (1)

packages/propel/src/emoji-icon-picker/emoji/emoji.tsx (1)

packages/propel/src/emoji-icon-picker/emoji-picker.tsx (1)

• EmojiPicker (11-142)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Agent
• GitHub Check: CodeQL analysis (javascript-typescript)
• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

🔇 Additional comments (1)

packages/propel/src/emoji-icon-picker/emoji-picker.tsx (1)

111-114: LGTM! Event propagation control implemented correctly.

The event handlers effectively isolate the emoji picker panel by preventing mouse, click, focus, and keyboard events from bubbling to parent components. This ensures interactions within the panel remain contained.