fix(tabs): tab cursor#5769
Merged
Merged
Conversation
|
Contributor
WalkthroughRemoved "bordered" variant handling and parent DOMRect dependency from tabs cursor logic; cursor positioning now derives directly from the selected tab’s offsetWidth/offsetHeight and container-relative left/top, and related ref/caller code simplified. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant T as Tabs component
participant ST as selectedTab (DOM)
participant C as Cursor (DOM)
participant G as getCursorStyles
U->>T: Select tab / Mount
T->>ST: Read offsetWidth, offsetHeight, offsetTop, bounding rect (container)
T->>G: getCursorStyles({width, height, left: container-relative, top: offsetTop, variant})
G-->>T: style object (no "bordered" branch)
T->>C: Apply style (left/top/width/height)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/components/tabs/src/tabs.tsx (1)
76-88: Simplification looks good, but consider a type-safe refactor.The refactored approach using native offset properties is cleaner and likely resolves the popover focus issue. However, the type assertion creating a partial
DOMRect(lines 77-80) is a code smell.Consider this type-safe alternative that avoids the assertion:
- const updateCursorPosition = (node: HTMLSpanElement, selectedTab: HTMLElement) => { - const tabRect = { - width: selectedTab.offsetWidth, - height: selectedTab.offsetHeight, - } as DOMRect; - - const styles = getCursorStyles(tabRect, selectedTab.offsetLeft, selectedTab.offsetTop); + const updateCursorPosition = (node: HTMLSpanElement, selectedTab: HTMLElement) => { + const tabRect: Pick<DOMRect, 'width' | 'height'> = { + width: selectedTab.offsetWidth, + height: selectedTab.offsetHeight, + }; + + const styles = getCursorStyles(tabRect as DOMRect, selectedTab.offsetLeft, selectedTab.offsetTop);Or refactor
getCursorStylesto accept width/height directly instead of DOMRect:const getCursorStyles = (width: number, height: number, relativeLeft: number, relativeTop: number) => { const baseStyles = { left: `${relativeLeft}px`, width: `${width}px`, }; if (variant === "underlined") { return { left: `${relativeLeft + width * 0.1}px`, top: `${relativeTop + height - 2}px`, width: `${width * 0.8}px`, height: "", }; } return { ...baseStyles, top: `${relativeTop}px`, height: `${height}px`, }; };
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/components/tabs/src/tabs.tsx(2 hunks)
⏰ 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). (6)
- GitHub Check: Continuous Release
- GitHub Check: Prettier
- GitHub Check: ESLint
- GitHub Check: Build
- GitHub Check: Tests
- GitHub Check: TypeScript
@heroui/accordion
@heroui/alert
@heroui/autocomplete
@heroui/avatar
@heroui/badge
@heroui/breadcrumbs
@heroui/button
@heroui/calendar
@heroui/card
@heroui/checkbox
@heroui/chip
@heroui/code
@heroui/date-input
@heroui/date-picker
@heroui/divider
@heroui/drawer
@heroui/dropdown
@heroui/form
@heroui/image
@heroui/input
@heroui/input-otp
@heroui/kbd
@heroui/link
@heroui/listbox
@heroui/menu
@heroui/modal
@heroui/navbar
@heroui/number-input
@heroui/pagination
@heroui/popover
@heroui/progress
@heroui/radio
@heroui/ripple
@heroui/scroll-shadow
@heroui/select
@heroui/skeleton
@heroui/slider
@heroui/snippet
@heroui/spacer
@heroui/spinner
@heroui/switch
@heroui/table
@heroui/tabs
@heroui/toast
@heroui/tooltip
@heroui/user
@heroui/react
@heroui/system
@heroui/system-rsc
@heroui/theme
@heroui/aria-utils
@heroui/dom-animation
@heroui/framer-utils
@heroui/react-rsc-utils
@heroui/react-utils
@heroui/shared-icons
@heroui/shared-utils
@heroui/stories-utils
@heroui/test-utils
@heroui/use-aria-accordion
@heroui/use-aria-accordion-item
@heroui/use-aria-button
@heroui/use-aria-link
@heroui/use-aria-modal-overlay
@heroui/use-aria-multiselect
@heroui/use-aria-overlay
@heroui/use-callback-ref
@heroui/use-clipboard
@heroui/use-data-scroll-overflow
@heroui/use-disclosure
@heroui/use-draggable
@heroui/use-form-reset
@heroui/use-image
@heroui/use-infinite-scroll
@heroui/use-intersection-observer
@heroui/use-is-mobile
@heroui/use-is-mounted
@heroui/use-measure
@heroui/use-pagination
@heroui/use-real-shape
@heroui/use-ref-state
@heroui/use-resize
@heroui/use-safe-layout-effect
@heroui/use-scroll-position
@heroui/use-ssr
@heroui/use-theme
@heroui/use-update-effect
@heroui/use-viewport-size
commit: |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/components/tabs/src/tabs.tsx (1)
77-80: Use a more precise type for the partial DOMRect.The object literal is cast
as DOMRectbut only containswidthandheight. SincegetCursorStylesonly uses these two properties, consider using a more precise interface or inline type to avoid misleading type assertions:- const tabRect = { - width: selectedTab.offsetWidth, - height: selectedTab.offsetHeight, - } as DOMRect; + const tabRect: Pick<DOMRect, 'width' | 'height'> = { + width: selectedTab.offsetWidth, + height: selectedTab.offsetHeight, + };Or update
getCursorStylessignature to acceptPick<DOMRect, 'width' | 'height'>instead ofDOMRect.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/components/tabs/src/tabs.tsx(2 hunks)
⏰ 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). (6)
- GitHub Check: TypeScript
- GitHub Check: Continuous Release
- GitHub Check: Prettier
- GitHub Check: ESLint
- GitHub Check: Tests
- GitHub Check: Build
🔇 Additional comments (2)
packages/components/tabs/src/tabs.tsx (2)
110-110: LGTM: Simplified call aligns with the refactored signature.The removal of the
parentRectargument simplifies the call and matches the updatedupdateCursorPositionsignature.
76-111: Verify popover input bug fix: Confirm that the new cursor-positioning logic resolves the issue where Inputs become disabled/read-only when Tabs live inside Popovers (issue #5668). Reproduce via https://github.com/kiinoo/bug4344.git and test edge cases: horizontal/vertical scrolling, nested popovers, and CSS transforms.
wingkwong
force-pushed
the
fix/eng-2785
branch
from
9375dd3 to
c8a0cc4
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #5668
📝 Description
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit
Bug Fixes
Refactor