fix: prevent to trigger event from svg of icon-button #345

noahchoii · 2025-11-17T07:24:38Z

Description of Changes

fixed bug: icon-button doesn't trigger event-handler when used with render prop #343

Cause

createSlot creates a new component on every render, causing React to recognize it as a type change and remount the DOM.
Subsequently, during click event handling, the remount occurs, removing the event target from the DOM and halting event propagation.

Event flow:

Icon click → Event handling starts
IconButton re-renders → createSlot re-called
New component created → React remount
SVG DOM removed → Event propagation interrupted 💥

Solution

Use useMemo for component memoization: Reuse cached components when children references are identical to prevent unnecessary remounts.

Checklist

Before submitting the PR, please make sure you have checked all of the following items.

The PR title follows the Conventional Commits convention. (e.g., feat, fix, docs, style, refactor, test, chore)
I have added tests for my changes.
I have updated the Storybook or relevant documentation.
I have added a changeset for this change. (e.g., for any changes that affect users, such as component prop changes or new features).
I have performed a self-code review.
I have followed the project's coding conventions and component patterns.

changeset-bot · 2025-11-17T07:24:42Z

⚠️ No Changeset found

Latest commit: 5749570

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2025-11-17T07:24:43Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
vapor-ui	Ready	Preview	Comment	Nov 17, 2025 10:40am

gemini-code-assist · 2025-11-17T07:24:53Z

Summary of Changes

Hello @noahchoii, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request resolves a critical bug in the IconButton component where its internal icon element would be unexpectedly remounted by React during click events, leading to interrupted event propagation. The fix involves memoizing the icon component's creation using useMemo, which stabilizes the DOM element across renders and ensures reliable event handling, particularly when the IconButton is used with other components like Tooltip.

Highlights

Event Propagation Fix: Addressed an issue where clicking an IconButton could interrupt event propagation due to React unexpectedly remounting the icon's DOM element.
Component Memoization: Implemented useMemo to memoize the createSlot component creation, ensuring the icon element remains stable across renders and preventing unnecessary DOM remounts.
New Test Case: Added a new test to verify that IconButton correctly handles clicks and prevents icon remounts when used in conjunction with a Tooltip.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

useMemo를 사용하여 불필요한 리렌더링을 방지한 수정은 올바르며, 문제의 원인을 정확히 해결합니다. 관련 테스트 케이스를 추가하여 회귀를 방지한 점도 좋습니다. 다만, 추가된 테스트 코드의 명확성과 일관성을 높이기 위한 몇 가지 제안 사항이 있습니다.

gemini-code-assist · 2025-11-17T07:25:27Z

packages/core/src/components/icon-button/icon-button.test.tsx

        </IconButton>
    );
-};
+});


forwardRef로 감싸진 컴포넌트에는 디버깅 편의성을 위해 displayName을 설정하는 것이 좋습니다.¹

Suggested change

});

});

IconButtonTest.displayName = 'IconButtonTest';

Style Guide References

Footnotes

스타일 가이드에서는 디버깅 편의성을 위해 forwardRef를 사용하는 컴포넌트에 displayName을 설정하는 것을 권장하고 있습니다. ↩

gemini-code-assist · 2025-11-17T07:25:28Z

packages/core/src/components/icon-button/icon-button.test.tsx

+
+        const icon2 = rendered.getByTestId('icon');
+
+        expect(icon).toBe(icon2);


테스트의 의도를 더 명확하게 하고 견고성을 높이기 위해, handleClickMock이 실제로 호출되었는지 확인하는 단언문을 추가하는 것이 좋습니다. 현재 테스트는 아이콘이 리마운트되지 않았는지만 확인하고 있어, 클릭 이벤트가 정상적으로 처리되었는지는 검증하지 못하고 있습니다.

expect(icon).toBe(icon2); expect(handleClickMock).toHaveBeenCalledTimes(1);

vapor-ui · 2025-11-17T07:29:43Z

✅ All tests passed!

Tests	Passed	Failed	Duration	Report
124	124	0	1m 12s	Open report ↗︎

Click here if you need to update snapshots.

MaxLee-dev

Icon-button is solved like this, but the same phenomenon is likely to occur in the part where createSlot is used. So I think it was modified by this PR , so it would be good to refer to it.

noahchoii · 2025-11-28T07:11:01Z

@MaxLee-dev I agree. However, I will merge this PR first to resolve the internal CS issue!

noahchoii added 2 commits November 17, 2025 14:57

prevent to trigger event from svg of icon-button

f171df9

memoize icon element

4030551

noahchoii requested review from MaxLee-dev and ZeroChoi2781 as code owners November 17, 2025 07:24

noahchoii added scope: icon-button Issues related to the IconButton component. type: bug Issues related to bug fixes labels Nov 17, 2025

gemini-code-assist bot reviewed Nov 17, 2025

View reviewed changes

vercel bot deployed to Preview November 17, 2025 07:26 View deployment

add event handler call test

5749570

vercel bot deployed to Preview November 17, 2025 10:40 View deployment

ZeroChoi2781 approved these changes Nov 28, 2025

View reviewed changes

MaxLee-dev approved these changes Nov 28, 2025

View reviewed changes

noahchoii merged commit 22530cc into main Nov 28, 2025
13 checks passed

noahchoii deleted the icon-button-element branch November 28, 2025 07:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: prevent to trigger event from svg of icon-button #345

fix: prevent to trigger event from svg of icon-button #345

Uh oh!

noahchoii commented Nov 17, 2025

Uh oh!

changeset-bot bot commented Nov 17, 2025 •

edited

Loading

Uh oh!

vercel bot commented Nov 17, 2025 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Nov 17, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Nov 17, 2025

Uh oh!

gemini-code-assist bot Nov 17, 2025

Uh oh!

vapor-ui commented Nov 17, 2025 •

edited

Loading

Uh oh!

MaxLee-dev left a comment

Uh oh!

noahchoii commented Nov 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants


		const icon2 = rendered.getByTestId('icon');

		expect(icon).toBe(icon2);

fix: prevent to trigger event from svg of icon-button #345

fix: prevent to trigger event from svg of icon-button #345

Uh oh!

Conversation

noahchoii commented Nov 17, 2025

Description of Changes

Cause

Solution

Checklist

Uh oh!

changeset-bot bot commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot commented Nov 17, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Nov 17, 2025

Choose a reason for hiding this comment

Style Guide References

Footnotes

Uh oh!

gemini-code-assist bot Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

vapor-ui commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MaxLee-dev left a comment

Choose a reason for hiding this comment

Uh oh!

noahchoii commented Nov 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

changeset-bot bot commented Nov 17, 2025 •

edited

Loading

vercel bot commented Nov 17, 2025 •

edited

Loading

vapor-ui commented Nov 17, 2025 •

edited

Loading