fix(calendar-view): [calendar-view] fix popper cant mouse enter #3218
Conversation
WalkthroughThis PR refines the tooltip management within the calendar view components. The changes adjust the mouse event handlers by modifying their logic and parameters. Specifically, the tooltip now shows immediately upon a mouseenter event with a scheduled call after a 20ms delay and employs a controlled closing mechanism on mouseleave by calling Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant C as Calendar Component
participant T as Tooltip
U->>C: Mouse Enter
C->>T: Set tooltip content
C->>T: Schedule tooltip.show() (20ms delay)
T-->>C: Tooltip displayed
U->>C: Mouse Leave
C->>T: Call setExpectedState(false)
C->>T: Trigger debounceClose()
T-->>C: Tooltip hidden
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/renderless/src/calendar-view/index.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. packages/vue/src/calendar-view/src/mobile-first.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. packages/vue/src/calendar-view/src/pc.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
WalkthroughThis PR addresses an issue in the calendar view component where the tooltip could not be hovered over with the mouse. The changes involve modifying the tooltip handling logic to ensure it can be interacted with using the mouse. Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| state.eventTipContent = val | ||
| state.eventTipVisible = true | ||
| setTimeout(tooltip.updatePopper, 20) | ||
| setTimeout(tooltip.show(), 20) |
There was a problem hiding this comment.
Using setTimeout(tooltip.show(), 20) might cause unexpected behavior because tooltip.show() is executed immediately, and setTimeout will receive its return value, not the function itself. Consider passing the function reference: setTimeout(() => tooltip.show(), 20). This ensures tooltip.show() is called after the delay.
|
[e2e-test-warn] The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug". Please make sure you've read our contributing guide |
shenjunjian
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/renderless/src/calendar-view/index.ts(1 hunks)packages/renderless/src/calendar-view/vue.ts(1 hunks)packages/vue/src/calendar-view/src/mobile-first.vue(1 hunks)packages/vue/src/calendar-view/src/pc.vue(2 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
packages/renderless/src/calendar-view/vue.ts (1)
packages/renderless/src/calendar-view/index.ts (1)
handleMouseleave(65-71)
🔇 Additional comments (3)
packages/renderless/src/calendar-view/vue.ts (1)
289-289: Enhanced mouseout handling by using ViewModel reference instead of state.Good change to update the
handleMouseleavefunction parameter fromstatetovm. This change aligns with the implementation inindex.tswhere the function needs direct access to the tooltip reference throughvm.$refs.tooltip.packages/vue/src/calendar-view/src/pc.vue (1)
61-62: Simple indentation improvement.Minor formatting change that improves readability of the conditional expression.
packages/renderless/src/calendar-view/index.ts (1)
62-62: Improved tooltip display with slight delay.Adding the timeout ensures the tooltip appears consistently after a brief delay (20ms), which improves the interaction flow and maintains a smooth user experience.
| effect="light" | ||
| placement="right" | ||
| > | ||
| <tiny-tooltip ref="tooltip" popper-class="absolute max-w-[theme(spacing.80)]" effect="light" placement="right"> |
There was a problem hiding this comment.
Improved tooltip interaction by removing visibility binding and manual control.
The removal of v-model="state.eventTipVisible" and :manual="true" attributes from the tooltip component allows for smoother user interaction with tooltip content. This change enables users to directly move their mouse onto the tooltip without it disappearing.
| effect="light" | ||
| placement="right" | ||
| > | ||
| <tiny-tooltip ref="tooltip" popper-class="tiny-calendar-view-tooltip" effect="light" placement="right"> |
There was a problem hiding this comment.
Improved tooltip interaction by removing visibility binding and manual control.
The removal of v-model="state.eventTipVisible" and :manual="true" attributes from the tooltip component is consistent with the changes in mobile-first.vue and allows users to move their mouse onto the tooltip without it disappearing.
| ({ vm }) => | ||
| () => { | ||
| state.eventTipVisible = false | ||
| const tooltip = vm.$refs.tooltip | ||
| tooltip.setExpectedState(false) | ||
| tooltip.debounceClose() | ||
| } |
There was a problem hiding this comment.
Fixed tooltip hover issue with improved close mechanism.
This is the core of the fix. By changing the mouse leave handler to:
- Access tooltip directly via
vm.$refs.tooltip - Set expected state to false with
setExpectedState(false) - Use
debounceClose()to delay closing
This allows users to move their mouse from the event item onto the tooltip before it closes, fixing the "popper cant mouse enter" issue.
PR
日历视图组件， 让鼠标可以移入tooltip
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit