feat(IpAddress): trigger ValueChanged on paste event

[ArgoZhang]

Link issues

fixes #7279

Summary By Copilot

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

Synchronize the IpAddress component value with pasted input via JS interop and align its styling class name.

New Features:

• Expose a JS-invokable TriggerUpdate method on the IpAddress component so JavaScript paste handling can update the bound IP value.

Enhancements:

• Rename the IpAddress root CSS class from ipaddress to bb-ip and update associated styles and usage to match.

Tests:

• Add a unit test to verify that invoking TriggerUpdate correctly updates the IpAddress component value.

[sourcery-ai]

Reviewer's Guide

Implements JS-to-.NET synchronization for the IpAddress component so that pasting an IP triggers ValueChanged, updates styling class names, and adds corresponding unit tests.

Sequence diagram for IpAddress paste synchronization from JS to .NET

sequenceDiagram
    actor User
    participant Browser
    participant IpAddressJs
    participant IpAddressComponent

    User->>Browser: Paste IPv4 string into IpAddress input
    Browser->>IpAddressJs: paste event
    IpAddressJs->>IpAddressJs: Sanitize input and split into parts
    IpAddressJs->>IpAddressJs: Clamp each part to 0-255
    IpAddressJs->>Browser: Update .ipv4-cell inputs with clamped values
    IpAddressJs->>IpAddressComponent: invoke.invokeMethodAsync(TriggerUpdate, v1, v2, v3, v4)
    IpAddressComponent->>IpAddressComponent: TriggerUpdate(v1, v2, v3, v4)
    IpAddressComponent->>IpAddressComponent: Set Value1..Value4
    IpAddressComponent->>IpAddressComponent: UpdateValue()
    IpAddressComponent->>IpAddressComponent: Set CurrentValueAsString
    IpAddressComponent-->>Browser: ValueChanged and validation pipeline triggered

Loading

Updated class diagram for IpAddress component with JSInvokable TriggerUpdate

classDiagram
    class IpAddress {
        +string Value1
        +string Value2
        +string Value3
        +string Value4
        +string CurrentValueAsString
        +bool IsDisabled
        +string CssClass
        +string ValidCss
        +string ClassName
        +void ValueChanged1(ChangeEventArgs args)
        +void ValueChanged2(ChangeEventArgs args)
        +void ValueChanged3(ChangeEventArgs args)
        +void ValueChanged4(ChangeEventArgs args)
        +void UpdateValue()
        +void TriggerUpdate(int v1, int v2, int v3, int v4)
    }

    class CssBuilder {
        +CssBuilder Default(string value)
        +CssBuilder AddClass(string value)
        +CssBuilder AddClass(string value, bool when)
        +string Build()
    }

    IpAddress --> CssBuilder : uses

Loading

File-Level Changes

Change	Details	Files
Wire JS paste handling to a new JS-invokable .NET method so pasting an IPv4 address updates the component value and triggers ValueChanged.	Expose a [JSInvokable] TriggerUpdate(int v1, int v2, int v3, int v4) method on the IpAddress component that updates the four octet values and calls UpdateValue() Change the JavaScript init function signature to accept a .NET invocation helper and, on paste, parse and clamp the IP segments, update the DOM input cells, cache prevValues, and call invoke.invokeMethodAsync("TriggerUpdate", ...args) with the parsed octets Ensure the BootstrapModuleAutoLoader attribute on the Razor component requests a JS object reference so JS interop can call back into .NET	src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.cs src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.js src/BootstrapBlazor/Components/IpAddress/IpAddress.razor
Rename the IpAddress CSS hook from .ipaddress to .bb-ip and update markup and tests accordingly.	Change the generated root CSS class from "ipaddress form-control" to "bb-ip form-control" in the IpAddress component Update the SCSS selector from .ipaddress to .bb-ip to match the new class name Adjust the IpAddress unit test to assert against the new "bb-ip form-control" class string	src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.cs src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.scss test/UnitTest/Components/IpAddressTest.cs
Add unit coverage for the new JS-invokable IP update path.	Add a TriggerUpdate_Ok unit test that calls TriggerUpdate(192, 0, 1, 10) and asserts the component Value becomes "192.0.1.10"	test/UnitTest/Components/IpAddressTest.cs

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#7279	Trigger the IpAddress component's ValueChanged (i.e., bound value update) when the user pastes an IP address into the input.	✅

Possibly linked issues

• feat(IpAddress): trigger ValueChanged on paste event #7279: PR wires JS paste handling to TriggerUpdate so IpAddress ValueChanged fires on paste, exactly matching issue.
• feat(IpAddress): trigger ValueChanged on paste event #7279: The PR implements IpAddress paste handling and JS callback, fulfilling the issue’s paste support request.

---

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 there - I've reviewed your changes and found some issues that need to be addressed.

• In the paste handler, invoke.invokeMethodAsync("TriggerUpdate", ...args) will fail when fewer than four octets are pasted because the JS interop signature expects four arguments; consider normalizing args to length 4 (e.g., filling missing positions with existing values or zeros) before invoking.
• The new TriggerUpdate method assumes values have already been clamped in JS; if there is any other path that might call it, consider adding basic range validation (0–255) on the C# side to avoid invalid IP state.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In the paste handler, `invoke.invokeMethodAsync("TriggerUpdate", ...args)` will fail when fewer than four octets are pasted because the JS interop signature expects four arguments; consider normalizing `args` to length 4 (e.g., filling missing positions with existing values or zeros) before invoking.
- The new `TriggerUpdate` method assumes values have already been clamped in JS; if there is any other path that might call it, consider adding basic range validation (0–255) on the C# side to avoid invalid IP state.

## Individual Comments

### Comment 1
<location> `src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.js:101-110` </location>
<code_context>
             const parts = raw.replace(/[^\d.]/g, '').split('.').filter(p => p.length);
             const cells = el.querySelectorAll(".ipv4-cell");
             let pos = 0;
+            const args = [];
             parts.forEach(p => {
                 if (pos > 3) {
                     return;
                 }
                 const num = Math.max(0, Math.min(255, parseInt(p, 10) || 0));
+                args.push(num);
                 cells[pos].value = num.toString();
                 ip.prevValues[pos] = cells[pos].value;
                 pos++;
             });
+
+            invoke.invokeMethodAsync("TriggerUpdate", ...args);
         });
     })
</code_context>

<issue_to_address>
**issue (bug_risk):** TriggerUpdate expects 4 ints but paste handler can pass fewer or none, which is likely to throw.

Because `TriggerUpdate(int v1, int v2, int v3, int v4)` always requires 4 parameters, calling `invoke.invokeMethodAsync("TriggerUpdate", ...args)` with fewer (e.g. pasting `"127"` → a single element in `args`, or invalid/empty paste → no elements) is likely to throw a JS interop exception. Please ensure 4 arguments are always passed (e.g., fill missing positions with defaults or existing values) or adjust the .NET signature to accept a different shape (e.g., a single string or an array).
</issue_to_address>

### Comment 2
<location> `test/UnitTest/Components/IpAddressTest.cs:49-54` </location>
<code_context>
         Assert.Equal("123.123.123.123", cut.Instance.Value);
     }

+    [Fact]
+    public async Task TriggerUpdate_Ok()
+    {
+        var cut = Context.Render<IpAddress>();
+        await cut.InvokeAsync(() => cut.Instance.TriggerUpdate(192, 0, 1, 10));
+        Assert.Equal("192.0.1.10", cut.Instance.Value);
+    }
+
</code_context>

<issue_to_address>
**suggestion (testing):** Add a test that verifies `TriggerUpdate` also updates the bound value / triggers `ValueChanged`, not just the internal `Value` property.

This test verifies only the internal `Value` property. Since the PR claims that `TriggerUpdate` also raises `ValueChanged` for consumers, please add a test that renders `IpAddress` with a bound value (e.g., via an `EditForm` or `bind-Value`), calls `TriggerUpdate`, and asserts that the bound model or `ValueChanged` callback receives the updated value (e.g., `"192.0.1.10"`).
</issue_to_address>

---

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 (testing): Add a test that verifies TriggerUpdate also updates the bound value / triggers ValueChanged, not just the internal Value property.

This test verifies only the internal Value property. Since the PR claims that TriggerUpdate also raises ValueChanged for consumers, please add a test that renders IpAddress with a bound value (e.g., via an EditForm or bind-Value), calls TriggerUpdate, and asserts that the bound model or ValueChanged callback receives the updated value (e.g., "192.0.1.10").

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (8ef6fe8) to head (4602d92).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #7280   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          745       745           
  Lines        32621     32628    +7     
  Branches      4522      4522           
=========================================
+ Hits         32621     32628    +7     

Flag	Coverage Δ
BB	100.00% <100.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ 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.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

This PR adds support for triggering ValueChanged events when pasting IP addresses into the IpAddress component, along with a CSS class rename for better naming consistency.

• Implements paste event handling in JavaScript to parse and apply pasted IP addresses
• Adds C# method TriggerUpdate callable from JavaScript via JSInvokable
• Renames CSS class from "ipaddress" to "bb-ip" for consistency with framework conventions

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
test/UnitTest/Components/IpAddressTest.cs	Updates test to use new CSS class name and adds test for TriggerUpdate method
src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.scss	Renames CSS class from "ipaddress" to "bb-ip" and removes BOM character
src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.js	Adds invoke parameter to init function and implements paste event handler with JavaScript-to-C# callback
src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.cs	Updates CSS class name, adds JSInvokable TriggerUpdate method, and removes BOM character
src/BootstrapBlazor/Components/IpAddress/IpAddress.razor	Enables JSObjectReference in BootstrapModuleAutoLoader attribute and removes BOM character
src/BootstrapBlazor/BootstrapBlazor.csproj	Bumps version from 10.1.2 to 10.1.3

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The TriggerUpdate method expects exactly 4 parameters, but the args array may contain fewer than 4 elements if the pasted text has fewer than 4 dot-separated parts (e.g., pasting "192.168"). This will cause the invocation to fail or pass undefined values. Consider either:

1. Padding the args array to always have 4 elements (e.g., filling remaining slots with 0)
2. Only invoking TriggerUpdate when exactly 4 parts are present

Example fix:

while (args.length < 4) {
    args.push(0);
}
invoke.invokeMethodAsync("TriggerUpdate", ...args);

Suggested change

	while (args.length < 4) {
	args.push(0);
	}

[Copilot]

The documentation comment is incomplete. It should describe what the method does and document the parameters. Consider:

/// <summary>
/// Triggers an update to the IP address value from JavaScript. Used when pasting values.
/// </summary>
/// <param name="v1">First octet of the IP address (0-255)</param>
/// <param name="v2">Second octet of the IP address (0-255)</param>
/// <param name="v3">Third octet of the IP address (0-255)</param>
/// <param name="v4">Fourth octet of the IP address (0-255)</param>

Suggested change

	/// 更新 值方法供 JS 调用
	/// </summary>
	/// <param name="v1"></param>
	/// <param name="v2"></param>
	/// <param name="v3"></param>
	/// <param name="v4"></param>
	/// Triggers an update to the IP address value from JavaScript. Used when pasting values.
	/// </summary>
	/// <param name="v1">First octet of the IP address (0-255).</param>
	/// <param name="v2">Second octet of the IP address (0-255).</param>
	/// <param name="v3">Third octet of the IP address (0-255).</param>
	/// <param name="v4">Fourth octet of the IP address (0-255).</param>