feat: Add two-way databinding for Checked on FluentMenuItems

[denispaluca]

🙋 Feature Request

FluentMenuItem component has no two way databinding when using @bind-Checked.

🤔 Expected Behavior

The user should be able to control the Checked state of the FluentMenuItem.

😯 Current Behavior

You can only set the Checked property in the beginning then you have not information what state the checked flag is for a certain menu item.

💁 Possible Solution

Add the CheckedChanged event callback.

🔦 Context

I want to know which items are checked or not, and how that is changing.

💻 Examples

[rpodevns]

Hi @denispaluca - Does the syntax below look like it'll provide the binding/callback you'd need?

@vnbaaij @dvoituron - I have this working locally. Is it something that could be added for v4?

<FluentStack  Orientation="Orientation.Vertical">
    <FluentMenu Open="true" OnCheckedChanged="HandleCheckedChanged" >
        <FluentMenuItem Id="menuitem1"
                        Role="MenuItemRole.MenuItemCheckbox"
                        @bind-Checked=menuItem1>
                            MenuItem 1 is @(menuItem1 ? "Checked" : "Unchecked")
        </FluentMenuItem>
        <FluentMenuItem Id="menuitem2"
                        Role="MenuItemRole.MenuItemCheckbox"
                        @bind-Checked=menuItem2>
                            MenuItem 2 is @(menuItem2 ? "Checked" : "Unchecked")
        </FluentMenuItem>
    </FluentMenu>
    <FluentButton OnClick="ToggleItem2">Toggle Menu item 2</FluentButton>
</FluentStack>

@code {

    private bool menuItem1 = false;
    private bool menuItem2 = false;

    private void ToggleItem2()
    {
        menuItem2 = !menuItem2;
    }

    private void HandleCheckedChanged(FluentMenuItem item)
    {
        DemoLogger.WriteLine(@$"{item.Id} {(item.Checked ? "Checked" : "Unchecked")}");
    }
}

[vnbaaij]

@rpodevns Yes, we can add that. Bring on the PR!

[denispaluca]

@rpodevns Yup, works perfectly!