fix(grid): [grid ] fix grid show overflow tip error when navigator scale #2971
Conversation
WalkthroughThe changes modify how tooltip content is set and how overflow is calculated for grid cells. The fallback to Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant C as Grid Cell
participant T as Tooltip Method
U->>C: Hover over cell
C->>T: Invoke tooltip logic
T->>T: Check cell.innerText for content
T->>T: Evaluate overflow with (rangeWidth + padding) against cell width + 0.1px tolerance
T-->>U: Display tooltip if overflow condition met
Possibly related PRs
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/vue/src/grid/src/tooltip/src/methods.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. Tip CodeRabbit's docstrings feature is now available as part of our Pro Plan! Simply use the command ✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
Walkthrough修复了当浏览器缩放时，表格错误地展示溢出提示的问题。通过在计算时增加0.1像素的误差来解决由于元素宽度出现小数点而导致的误差问题。 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| const tooltip = this.$refs.tooltip | ||
| const wrapperElem = cell | ||
| const content = cell.innerText.trim() || cell.textContent.trim() | ||
| const content = cell.innerText.trim() |
There was a problem hiding this comment.
Removing cell.textContent.trim() might cause issues if innerText is not supported or behaves differently across browsers. Ensure that innerText is consistently supported in the environments where this code will run.
WalkthroughFixed an issue where the table incorrectly displays overflow prompts when the browser zooms. The error problem caused by the decimal point of the element width is solved by adding an error of 0.1 pixels during calculation. Changes
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/vue/src/grid/src/tooltip/src/methods.ts (1)
57-59: Good fix for the browser scaling issue.The addition of a 0.1 pixel tolerance to account for browser scaling decimal inaccuracies is a sensible solution to prevent erroneous overflow tips. The comment clearly explains the rationale.
One suggestion: Consider if this tolerance value (0.1) should be configurable or derived from some calculation rather than being a hardcoded constant, especially if different scaling scenarios might require different tolerance values.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/vue/src/grid/src/tooltip/src/methods.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (1)
packages/vue/src/grid/src/tooltip/src/methods.ts (1)
50-50: Consider potential impact of removing the textContent fallback.The code has removed what appears to be a fallback to
cell.textContent.trim()whencell.innerTextis empty. This could affect tooltip behavior in cases whereinnerTextis empty buttextContentcontains meaningful content.Was this change intentional? If so, please ensure that removing this fallback doesn't prevent tooltips from appearing in legitimate cases.
PR
修复当浏览器缩放时，表格错误地展示了溢出提示。
问题根因：
当浏览器缩放的情况下，元素宽度可能会出现小数点的情况。导致计算时，出现误差，导致了错误的判断了溢出。
解决方案：
增加0.1像素的计算误差，在误差范围内，判断为不溢出。
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