fix(suggestion): fix the dropdown width not adapting when block prop … #358
Conversation
✅ Deploy Preview for antd-design-x-vue ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
""" WalkthroughThe change updates the dropdown width handling in the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SuggestionComponent
participant Cascader
Note over SuggestionComponent: On render
SuggestionComponent->>SuggestionComponent: Reference slot container (cascaderSlotRef)
SuggestionComponent->>SuggestionComponent: Measure container width (useElementSize)
SuggestionComponent->>SuggestionComponent: Compute dropdownStyle with width if block=true
SuggestionComponent->>Cascader: Pass dropdownStyle as prop
User->>SuggestionComponent: Interacts with dropdown
Cascader->>User: Renders dropdown with computed width
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. 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
src/suggestion/Suggestion.vueOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser 'vue-eslint-parser' declared in '.eslintrc.js': Cannot find module 'vue-eslint-parser'
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
![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
🧹 Nitpick comments (3)
src/_util/hooks/use-element-width.ts (2)
1-1: Style: add spaces after commas for readabilityThe import list is hard to read without spaces after the commas.
-import { ref,onMounted,onUnmounted, type Ref } from "vue"; +import { ref, onMounted, onUnmounted, type Ref } from 'vue';
22-23: Return areadonlyref to prevent external mutationExposing a mutable ref allows consumers to overwrite the width accidentally.
-import { readonly } from 'vue'; … - return width + return readonly(width);src/suggestion/Suggestion.vue (1)
43-44: Initialise ref withnullfor clearer typing
ref<HTMLElement>()defaults toundefined, but Vue DOM refs conventionally start asnull, which plays nicer with strict templates.-const cascaderSlotRef = ref<HTMLElement>(); +const cascaderSlotRef = ref<HTMLElement | null>(null);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/_util/hooks/use-element-width.ts(1 hunks)src/suggestion/Suggestion.vue(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/_util/hooks/use-element-width.ts (1)
src/vc-util/Dom/isVisible.ts (1)
element(1-25)
🔇 Additional comments (1)
src/suggestion/Suggestion.vue (1)
130-131: Ensure loss ofdropdownMatchSelectWidthdoesn’t regress non-block behaviourThe old implementation relied on
dropdownMatchSelectWidth. Removing it may
change width behaviour whenblock === false.Please verify all call-sites visually or re-add the prop for the non-block
case:<Cascader … - dropdownStyle={dropdownStyle.value} + dropdownMatchSelectWidth={!block} + dropdownStyle={dropdownStyle.value} >
wzc520pyfm
force-pushed
the
suggestion/style/block
branch
from
618284d to
67cf95e
Compare
🐛 Bug Fix: Dropdown width not adapting when block prop is true
Problem
When the
blockprop is set totrueon the Suggestion component, the dropdown width was not properly matching the slot element width, causing layout inconsistency and poor visual alignment.Root Cause
The component was not dynamically monitoring the slot element's width changes, resulting in the dropdown maintaining its default width instead of adapting to the container's actual width.
Solution
useElementWidthhook: A reusable utility that leveragesResizeObserverto monitor element width changes in real-timeblockmode is enabledTechnical Changes
useElementWidthfor real-time element width monitoringdropdownStylethat conditionally applies width based onblockpropResizeObserverfor efficient width change detectionCode Changes
Before/After
Before: Dropdown maintains fixed width regardless of container size
After: Dropdown width dynamically adapts to match container width in block mode
Fixes: Block mode layout inconsistency
Component: Suggestion
Type: Bug Fix
fix #143
Summary by CodeRabbit
New Features
Refactor