Conversation
Reviewer's guide (collapsed on small PRs)Reviewer's GuideAdjusts how the resizable bar element is located within the Drawer component so that AllowResize works correctly when the .drawer-bar is not a direct descendant of the root element, and updates disposal logic accordingly. Flow diagram for Drawer bar selection in initDrag and disposeflowchart TD
A[initDrag called with el] --> B[Select drawerBody using selector .drawer-body]
B --> C[Find bar by iterating drawerBody children and checking class drawer-bar]
C --> D{bar found?}
D -->|Yes| E[Attach Drag.drag handlers to bar]
D -->|No| F[Skip drag initialization]
subgraph DisposeFlow
G[dispose called with id] --> H[Select el by id]
H --> I[Select drawerBody using selector .drawer-body]
I --> J[Find bar by iterating drawerBody children and checking class drawer-bar]
J --> K{bar found?}
K -->|Yes| L[Call Drag.dispose on bar]
K -->|No| M[No drag disposal needed]
end
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this comment.
Hey there - I've reviewed your changes - here's some feedback:
- Both in
initDraganddispose, the new logic assumesdrawerBodyis always found; consider null-guardingdrawerBodybefore accessing.childrento avoid potential runtime errors when the structure is not as expected. - You repeat the same
drawerBody/barlookup logic ininitDraganddispose; consider extracting this into a small helper function to keep the behavior consistent and reduce duplication. - By restricting the bar lookup to direct children of
.drawer-body, any existing structure where.drawer-baris nested deeper will now stop working; if backward compatibility is needed, you might want to fallback to the previousquerySelector('.drawer-bar')when the direct-child search fails.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Both in `initDrag` and `dispose`, the new logic assumes `drawerBody` is always found; consider null-guarding `drawerBody` before accessing `.children` to avoid potential runtime errors when the structure is not as expected.
- You repeat the same `drawerBody`/`bar` lookup logic in `initDrag` and `dispose`; consider extracting this into a small helper function to keep the behavior consistent and reduce duplication.
- By restricting the bar lookup to direct children of `.drawer-body`, any existing structure where `.drawer-bar` is nested deeper will now stop working; if backward compatibility is needed, you might want to fallback to the previous `querySelector('.drawer-bar')` when the direct-child search fails.
## Individual Comments
### Comment 1
<location> `src/BootstrapBlazor/Components/Drawer/Drawer.razor.js:12` </location>
<code_context>
let isVertical = false;
const drawerBody = el.querySelector('.drawer-body');
- const bar = el.querySelector('.drawer-bar');
+ const bar = [...drawerBody.children].find(i => i.classList.contains('drawer-bar'));
Drag.drag(bar,
e => {
</code_context>
<issue_to_address>
**issue (bug_risk):** Guard against `drawerBody` being null before accessing `.children`.
This change now assumes `el.querySelector('.drawer-body')` always returns an element. If `.drawer-body` is missing, `drawerBody` will be `null` and `[...drawerBody.children]` will throw. Please add a null check (e.g., early return or conditional/optional chaining) before accessing `drawerBody.children`.
</issue_to_address>
### Comment 2
<location> `src/BootstrapBlazor/Components/Drawer/Drawer.razor.js:11-12` </location>
<code_context>
let height = 0;
let isVertical = false;
const drawerBody = el.querySelector('.drawer-body');
- const bar = el.querySelector('.drawer-bar');
+ const bar = [...drawerBody.children].find(i => i.classList.contains('drawer-bar'));
Drag.drag(bar,
e => {
</code_context>
<issue_to_address>
**issue:** Apply the same null-safety for `drawerBody` in `dispose` as in `initDrag`.
Because `dispose` now assumes `.drawer-body` always exists, `drawerBody` could be `null` if the child is removed or markup changes, causing a runtime error when spreading `children`. Add a null check before accessing `drawerBody.children` to make the disposal path resilient to these cases.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7365 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 747 747
Lines 32760 32760
Branches 4540 4540
=========================================
Hits 32760 32760
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR fixes a bug where the AllowResize functionality in the Drawer component was not working correctly. The issue was that the original code used querySelector which could find the wrong drawer-bar element when there are nested drawers, causing the resize feature to malfunction.
Key Changes:
- Updated selector logic in both
initDraganddisposefunctions to search fordrawer-baronly among direct children ofdrawerBody, preventing conflicts with nested drawer elements - Removed BOM character and trailing whitespace for code cleanup
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Link issues
fixes #7364
Summary By Copilot
Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Bug Fixes: