fix(Watermark): multiple elements not displayed

[ArgoZhang]

Link issues

fixes #6056

Summary By Copilot

This pull request simplifies the watermark monitoring logic in the Watermark.razor.js file by replacing a manual child element check with a more robust query selector. This change improves code readability and reduces the likelihood of errors when identifying the watermark element.

Simplification of watermark monitoring logic:

• src/BootstrapBlazor/Components/Watermark/Watermark.razor.js: Replaced the manual child element checks and class name validation with a querySelector call to directly find the watermark element (.bb-watermark-bg). This reduces complexity and ensures the correct element is targeted.

Regression?

• Yes
• No

Risk

• High
• Medium
• Low

Verification

• Manual (required)
• Automated

Packaging changes reviewed?

• Yes
• No
• N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Merge the latest code from the main branch

Summary by Sourcery

Simplify watermark monitoring by replacing manual child element checks with a querySelector lookup for the .bb-watermark-bg element to ensure correct watermark detection

Bug Fixes:

• Fix watermark element detection when multiple elements are present by using querySelector instead of manual child indexing

Enhancements:

• Remove redundant child count and class name checks in Watermark.razor.js to streamline the monitoring logic

[sourcery-ai]

Reviewer's Guide

Refactored the watermark monitoring function to simplify element detection by replacing manual child checks with a querySelector lookup for the watermark element.

File-Level Changes

Change	Details	Files
Simplify watermark element detection	Remove manual children count and className validations Use el.querySelector('.bb-watermark-bg') to find the watermark element directly Adjust mark assignment to rely on querySelector result	src/BootstrapBlazor/Components/Watermark/Watermark.razor.js

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#6056	The watermark and content within it should be displayed correctly when the Watermark component contains multiple child components, such as two tables.	✅
#6056	The watermark and table data should be displayed correctly on the /users page when wrapped in the Watermark component.	✅

Possibly linked issues

• bug(Watermark): 包含多个组件时会不显示水印及内容 #6056: The PR fixes the watermark display issue when multiple components are present by improving element selection logic.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @ArgoZhang - I've reviewed your changes - here's some feedback:

• Consider adding a null‐check right after the querySelector so you don’t call getComputedStyle on null when no .bb-watermark-bg is found.
• If you expect multiple watermark elements, replace querySelector with querySelectorAll and loop through each match rather than only handling the first one.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

suggestion (bug_risk): Guard against null result from querySelector to avoid getComputedStyle error

Guard against mark being null before calling getComputedStyle. For example:

if (!mark) {
  clearWatermark(watermark);
  return;
}

Suggested change

	const mark = el.querySelector('.bb-watermark-bg');
	const style = getComputedStyle(mark);
	const mark = el.querySelector('.bb-watermark-bg');
	if (!mark) {
	clearWatermark(watermark);
	return;
	}
	const style = getComputedStyle(mark);

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (97bd421) to head (bd31c8a).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #6058   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          701       701           
  Lines        30956     30956           
  Branches      4378      4378           
=========================================
  Hits         30956     30956           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.