Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(MultiSelect): add StateHasChanged when call SetValue #4781

Merged
merged 3 commits into from
Dec 4, 2024

Conversation

Ocrosoft
Copy link
Contributor

@Ocrosoft Ocrosoft commented Dec 3, 2024

fix(MultiSelect): add StateHasChanged when call SetValue

删除了 MultiSelect 元素更改时对是否 StateHasChanged 调用的判断。

Issue

close #4782

Description

可能为此提交 8a8fa15#diff-07918ce1b66955e76da5cd0ffa38512cce984fa2a09735a60e0db37b45235527L4 引入。
可能有更好的解决方案,若有直接关闭 PR 即可。

最小 DEMO(基于示例工程)

  1. 修改 Table 外的 MultiSelect,该 MultiSelect 会重新渲染。
  2. 点击 Table 的新建按钮,修改弹窗中的 MultiSelect,弹窗中的 MultiSelect 不会重新渲染。

Index.razor

@page "/"
@attribute [TabItemOption(Text = "Index", Closable = false)]

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Table TItem="TestClass" Items="@_classList" ShowToolbar="true">
    <TableColumns>
        <TableColumn @bind-Field="@context.List">
            <EditTemplate Context="value">
                <MultiSelect Items="_available" @bind-Value="@value.List" />
            </EditTemplate>
        </TableColumn>
    </TableColumns>
</Table>

<div>
    <MultiSelect Items="_available" @bind-Value="@_class.List" />
</div>

@code {
    public class TestClass
    {
        public List<string> List { get; set; } = [];
    }

    public List<TestClass> _classList = [];
    public TestClass _class = new();

    public List<SelectedItem> _available = [new("1", "1"), new("2", "2"), new("3", "3")];
}

Regression?

  • Yes
  • No

8.1.7 版本起存在此问题。

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

Bug Fixes:

  • Ensure the MultiSelect component refreshes correctly by removing the conditional check before calling StateHasChanged.

Copy link

sourcery-ai bot commented Dec 3, 2024

Reviewer's Guide by Sourcery

This PR fixes a component refresh issue in the MultiSelect component by ensuring StateHasChanged is always called after value changes, regardless of whether there's a ValueChanged delegate. The change removes a conditional check that was preventing proper UI updates in certain scenarios, particularly within Table components.

Sequence diagram for MultiSelect component refresh

sequenceDiagram
    actor User
    participant MultiSelect
    participant UI

    User->>MultiSelect: Change value
    MultiSelect->>UI: StateHasChanged()
    UI-->>User: Refresh UI

    note over MultiSelect: StateHasChanged is always called
    note over UI: UI refreshes without conditional check
Loading

Class diagram for MultiSelect component changes

classDiagram
    class MultiSelect {
        - PreviousValue: string
        + SetValue()
    }
    note for MultiSelect "StateHasChanged is now always called in SetValue()"
Loading

File-Level Changes

Change Details Files
Modified the component refresh logic in MultiSelect to ensure consistent UI updates
  • Removed conditional check for ValueChanged delegate before calling StateHasChanged
  • Always trigger StateHasChanged after setting the component value
  • Fixed regression issue present since version 8.1.7
src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs

Possibly linked issues


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.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a 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. You can also use
    this command to specify where the summary should be inserted.

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

Copy link

bb-auto bot commented Dec 3, 2024

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

@bb-auto bb-auto bot requested a review from ArgoZhang December 3, 2024 16:09
sourcery-ai[bot]
sourcery-ai bot previously approved these changes Dec 3, 2024
Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Ocrosoft - I've reviewed your changes and they look great!

Here's what I looked at during the review
  • 🟢 General issues: all looks good
  • 🟢 Security: all looks good
  • 🟢 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 ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

ArgoZhang
ArgoZhang previously approved these changes Dec 4, 2024
@ArgoZhang
Copy link
Collaborator

@Ocrosoft 感谢提交 PR 请根据上面提示键入命令 签署 CLA。谢谢啦

@Ocrosoft
Copy link
Contributor Author

Ocrosoft commented Dec 4, 2024

@microsoft-github-policy-service agree

@ArgoZhang
Copy link
Collaborator

@Ocrosoft 感谢感谢签署 CLA 再帮忙点一下右上角 star 给项目一个星星。稍后我给讨论一下这个 PR

@ArgoZhang ArgoZhang changed the title fix(MultiSelect): add StateHasChanged to fix the issue where the component may not refresh fix(MultiSelect): add StateHasChanged when call SetValue Dec 4, 2024
@bb-auto bb-auto bot added the enhancement New feature or request label Dec 4, 2024
@bb-auto bb-auto bot added this to the v9.0.0 milestone Dec 4, 2024
@ArgoZhang
Copy link
Collaborator

ArgoZhang commented Dec 4, 2024

@Ocrosoft 我开个讨论针对这个 PR #4783

@ArgoZhang ArgoZhang dismissed stale reviews from sourcery-ai[bot] and themself via c17f00a December 4, 2024 06:26
@ArgoZhang ArgoZhang merged commit 2be3326 into dotnetcore:main Dec 4, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

refactor(MultiSelect): add StateHasChanged when call SetValue
2 participants