feat(SelectTable): add IsMultipleSelect parameter

[Tony-ST0754]

Link issues

fixes #7628
fixes #7633

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

Fix BootstrapInputNumber thousand-separator formatting not displaying correctly by integrating JS interop to toggle numeric/text input on focus and blur.

Bug Fixes:

• Resolve BootstrapInputNumber not showing thousand-separator formatting as expected when the field loses focus.

Enhancements:

• Add JS initialization hook and class marker to BootstrapInputNumber to support client-side formatting behavior on focus and blur.

[bb-auto]

Thanks for your PR, @Tony-ST0754. Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

[sourcery-ai]

Reviewer's Guide

Adds JS interop initialization and a CSS marker class to BootstrapInputNumber to correctly toggle between numeric and formatted (thousand-separated) display on focus/blur, fixing the thousand-separator formatting issue.

Sequence diagram for BootstrapInputNumber focus/blur thousand-separator formatting

sequenceDiagram
    actor User
    participant Browser
    participant BootstrapInputNumber_TValue as BootstrapInputNumber_TValue
    participant BootstrapInputJs as BootstrapInput_razor_js

    User->>Browser: Load page with BootstrapInputNumber
    Browser->>BootstrapInputNumber_TValue: Component initialization
    BootstrapInputNumber_TValue->>BootstrapInputJs: init(id, Interop, TriggerFormatValue)

    User->>Browser: Focus input
    Browser->>BootstrapInputJs: focus event
    BootstrapInputJs->>BootstrapInputJs: Check type is text and class contains input-number
    BootstrapInputJs->>Browser: Set type to number
    BootstrapInputJs->>Browser: Remove thousand separators from value
    BootstrapInputJs->>BootstrapInputNumber_TValue: invokeMethodAsync(TriggerFormatValue, true)
    BootstrapInputNumber_TValue->>BootstrapInputNumber_TValue: TriggerFormatValue(true)
    BootstrapInputNumber_TValue->>BootstrapInputNumber_TValue: CurrentValueAsString = InternalFormat(Value)
    BootstrapInputNumber_TValue->>Browser: StateHasChanged rerenders input

    User->>Browser: Blur input
    Browser->>BootstrapInputJs: blur event
    BootstrapInputJs->>BootstrapInputJs: Check type is number and class contains input-number
    BootstrapInputJs->>Browser: Set type to text
    BootstrapInputJs->>BootstrapInputNumber_TValue: invokeMethodAsync(TriggerFormatValue, false)
    BootstrapInputNumber_TValue->>BootstrapInputNumber_TValue: TriggerFormatValue(false)
    BootstrapInputNumber_TValue->>BootstrapInputNumber_TValue: CurrentValueAsString = GetFormatString(Value)
    BootstrapInputNumber_TValue->>Browser: StateHasChanged rerenders formatted value

Loading

Updated class diagram for BootstrapInputNumber thousand-separator behavior

classDiagram
    class BootstrapInputNumber_TValue {
        <<partial>>
        +string InputClassString
        +Task InvokeInitAsync()
        +Task TriggerFormatValue(bool focus)
    }

    class CssBuilder {
        +CssBuilder Default(string value)
        +CssBuilder AddClass(string value)
        +CssBuilder AddClass(string value, bool condition)
        +CssBuilder AddClassFromAttributes(object additionalAttributes)
    }

    BootstrapInputNumber_TValue --> CssBuilder : builds InputClassString

    class BootstrapModuleAutoLoader_Attribute {
        +BootstrapModuleAutoLoader_Attribute(string path)
        +bool JSObjectReference
    }

    BootstrapModuleAutoLoader_Attribute <|.. BootstrapInputNumber_TValue

    class BootstrapInput_razor_js {
        +void init(string id, object invoke, string method)
        +void focus(string id)
    }

    BootstrapInputNumber_TValue ..> BootstrapInput_razor_js : JSInterop init(id, Interop, TriggerFormatValue)

Loading

File-Level Changes

Change	Details	Files
Wire BootstrapInputNumber to a JS module that toggles the input type and value formatting on focus/blur via JS interop.	Annotate BootstrapInputNumber with BootstrapModuleAutoLoader to load Input/BootstrapInput.razor.js with a JS object reference. Extend InputClassString to include an input-number CSS class used to identify these inputs in JavaScript. Override InvokeInitAsync to call a new init JS function with the element id, interop object, and .NET callback name. Add a JSInvokable TriggerFormatValue method that applies InternalFormat on focus and GetFormatString on blur, followed by StateHasChanged.	src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs
Implement client-side focus/blur handlers to swap between raw numeric input and formatted thousand-separated display for inputs marked as input-number.	Add an init function that attaches focus and blur event handlers to the input element by id using EventHandler. On focus, detect text-type input with the input-number class, switch type to number, strip commas from the value, and invoke the .NET callback indicating focus. On blur, detect number-type input with the input-number class, switch type back to text, and invoke the .NET callback indicating blur so .NET can reformat the value.	src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#7628	Ensure BootstrapInputNumber displays and toggles thousand-separator formatting correctly (e.g., by marking the component with a special class and wiring JS callbacks on focus/blur).	✅

Possibly linked issues

• feat(SelectTable): add IsMultipleSelect parameter #7628: They are the same: both address BootstrapInputNumber thousand separator display via class marker and JS callback.

---

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 - I've left some high level feedback:

• In BootstrapInput.razor.js, using e.target.getAttribute('class').includes('input-number') is brittle; prefer e.target.classList?.contains('input-number') to avoid false positives and issues when class is null or large.
• The init handler attaches focus/blur handlers but never removes them; consider wiring cleanup (e.g., via a dispose function or existing module pattern) to avoid leaking handlers when components are re-rendered or removed.
• The InvokeInitAsync override in BootstrapInputNumber replaces the base behavior entirely; if the base class has important initialization logic, consider awaiting base.InvokeInitAsync() before or after your JS interop call.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In `BootstrapInput.razor.js`, using `e.target.getAttribute('class').includes('input-number')` is brittle; prefer `e.target.classList?.contains('input-number')` to avoid false positives and issues when `class` is null or large.
- The `init` handler attaches focus/blur handlers but never removes them; consider wiring cleanup (e.g., via a dispose function or existing module pattern) to avoid leaking handlers when components are re-rendered or removed.
- The `InvokeInitAsync` override in `BootstrapInputNumber` replaces the base behavior entirely; if the base class has important initialization logic, consider awaiting `base.InvokeInitAsync()` before or after your JS interop call.

---

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.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (eb6dad4) to head (a534cad).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #7629   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          749       749           
  Lines        33017     33105   +88     
  Branches      4581      4593   +12     
=========================================
+ Hits         33017     33105   +88     

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.