Skip to content

MudListItem and MudMenuItem: Render as anchor with"Href" property (#1717)#8649

Merged
henon merged 9 commits intoMudBlazor:devfrom
intronik:fix-1717-MudListItem-ShouldRenderAsAnchor
May 5, 2024
Merged

MudListItem and MudMenuItem: Render as anchor with"Href" property (#1717)#8649
henon merged 9 commits intoMudBlazor:devfrom
intronik:fix-1717-MudListItem-ShouldRenderAsAnchor

Conversation

@belucha
Copy link
Contributor

@belucha belucha commented Apr 11, 2024

Description

fixes #1717

MudElement is used to render a MudListItem either using a div or an a element to render the item.
This way a list and or menu item with an Href can be opened in a new browser tab using the right click menu.
MudElement had to be modified the ClickPropagation property was depending on the HtmlTag value, this logic was moved to
the MudBaseButton.

How Has This Been Tested?

  • unit tests have been added
  • visually

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added breaking change This change will require consumer code updates bug Unexpected behavior or functionality not working as intended PR: needs review labels Apr 11, 2024
@belucha
Copy link
Contributor Author

belucha commented Apr 11, 2024

The breaking change is in my opinion minor as it concerns MudElement with the ClickPropagation property not having internal logic.

@codecov
Copy link

codecov bot commented Apr 11, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.20%. Comparing base (28bc599) to head (827b7ae).
Report is 147 commits behind head on dev.

Additional details and impacted files
@@            Coverage Diff             @@
##              dev    #8649      +/-   ##
==========================================
+ Coverage   89.82%   90.20%   +0.37%     
==========================================
  Files         412      423      +11     
  Lines       11878    12274     +396     
  Branches     2364     2407      +43     
==========================================
+ Hits        10670    11072     +402     
+ Misses        681      668      -13     
- Partials      527      534       +7     

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

@belucha
Copy link
Contributor Author

belucha commented Apr 12, 2024

Another thing that I would like to discuss here.

What is the intended behaviour when both Href and OnClick handlers are present. I think the behaviour should be consistent across all components.

From my understanding, if Href is set the OnClick should not be called. But this decision imposes some troubles. It is for example not easily possible to add an MenuClose handler to inner MudListItem.
It even gets more complex, if we add an Target attribute (e.g. _blank) and or a ForceLoad parameter. What is the expected behaviour for a disabled button/item with an href. Should the Href then also be disabled, by forcing a render as button tag.

For my expectation it would be best to always call the OnClick handler. That might close a menu and Browser client can do a navigation (even to a new tab) -- then the close menu is desired.

I think it is quite important to have a discussion on this intended behaviour, to get a consistent design!

My Pull-Request tried to solve the problem of #1717, but it seems there are more thoughts required!

@ScarletKuro ScarletKuro requested a review from henon April 12, 2024 20:45
@ScarletKuro
Copy link
Member

Sorry, I think my PR #8634 added conflicts to your PR, since I did method renaming, so was the tests affected too.

belucha added 2 commits April 16, 2024 19:40
…rameter

Previously the ClickPropagation parameter had MudElement internal logic. E.g. the parameter was only applied when the HtmlTag was an "button". This logic has been moved to MudBaseButton.
@belucha
Copy link
Contributor Author

belucha commented Apr 16, 2024

I've merged with dev and kept the meaning of MudElements ClickPropagation Parameter.

@belucha
Copy link
Contributor Author

belucha commented Apr 16, 2024

@danielchalmers I followed your recommendations and left the ClickPropagation parameter unchanged. The PreventDefault parameter was added in the same way. Even if the name imposes an inversion, I would stick with that name, as it matches the output attribute.

@henon henon changed the title fix #1717 MudListItem+MudMenuItem render as anchor with"Href" property MudListItem and MudMenuItem: Render as anchor with"Href" property (#1717) Apr 16, 2024

[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public bool PreventDefault { get; set; }
Copy link
Member

@danielchalmers danielchalmers Apr 16, 2024

Choose a reason for hiding this comment

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

If this only applies to onclick the name should probably reflect that

Copy link
Contributor Author

@belucha belucha May 5, 2024

Choose a reason for hiding this comment

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

If this only applies to onclick the name should probably reflect that

Yes it only applies to onclick, but other components use the same name too. In my original pull request I named it different StopOnClickPropagation someone argued, that I should keep the name.

We could name ist OnClickPropagion but the I liked my original proposal more, because it just uses the same names as dot net uses.

Honestly I'm very uncertain here.

@henon
Copy link
Contributor

henon commented Apr 16, 2024

What is the intended behaviour when both Href and OnClick handlers are present. I think the behaviour should be consistent
From my understanding, if Href is set the OnClick should not be called. But this decision imposes some troubles. It is for example not easily possible to add an MenuClose handler to inner MudListItem. It even gets more complex, if we add an Target attribute (e.g. _blank) and or a ForceLoad parameter. What is the expected behaviour for a disabled button/item with an href. Should the Href then also be disabled, by forcing a render as button tag.

For my expectation it would be best to always call the OnClick handler. That might close a menu and Browser client can do a navigation (even to a new tab) -- then the close menu is desired.

I think it is quite important to have a discussion on this intended behaviour, to get a consistent design!

I agree that calling the OnClick handler regardless of the Href value (except if Disabled is true) makes sense. If I attach a click handler I expect it to fire. If I want to just navigate I don't attach the handler, right?

@danielchalmers
Copy link
Member

I agree that calling the OnClick handler regardless of the Href value (except if Disabled is true) makes sense. If I attach a click handler I expect it to fire. If I want to just navigate I don't attach the handler, right?

@henon Isn't it a problem that several other controls do it the other way?

@henon
Copy link
Contributor

henon commented Apr 17, 2024

Yeah, that is a problem. I don't understand why it is like that. It is always a bad idea to try to "save the user from its own supposed stupidity". Most of the times you just hinder advanced use-cases for nothing.

@henon
Copy link
Contributor

henon commented May 2, 2024

@belucha Please resolve conflicts. What's the status? We should get this done for v7

belucha added 3 commits May 5, 2024 14:58
…m-ShouldRenderAsAnchor

# Conflicts:
#	src/MudBlazor.UnitTests/Components/MenuTests.cs
#	src/MudBlazor/Base/MudBaseButton.cs
#	src/MudBlazor/Components/List/MudListItem.razor
#	src/MudBlazor/Components/List/MudListItem.razor.cs
@belucha
Copy link
Contributor Author

belucha commented May 5, 2024

@henon I've just resolved all conflicts.
@danielchalmers I also considered your suggestions, except on regarding the rename of MudElement.ClickPropagation. I left that unchanged, since this was the original API and the the difference between OnClickPropagation and ClickPropagation is quite little.

Copy link
Contributor

@henon henon left a comment

Choose a reason for hiding this comment

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

Just rename the private properties then it should be ready for merging.

@henon henon merged commit 4b651ce into MudBlazor:dev May 5, 2024
@henon
Copy link
Contributor

henon commented May 5, 2024

Thanks!

@belucha belucha deleted the fix-1717-MudListItem-ShouldRenderAsAnchor branch May 5, 2024 17:15
@belucha
Copy link
Contributor Author

belucha commented May 5, 2024

@henon Thanks to you and the others for the great work on this lib!

@henon henon mentioned this pull request May 5, 2024
@henon
Copy link
Contributor

henon commented May 5, 2024

Added to v7.0.0 Migration Guide #8447

@belucha
Copy link
Contributor Author

belucha commented May 5, 2024

@henon
I'm so sorry, I found an issue in the code just now, that was not my intention and I somehow missed it.
in MudBaseButton.cs there is a property:

        public bool ApplyClickPropagation => HtmlTag != "button" || ClickPropagation;

this should be private and matching to your convention:

        private bool GetClickPropagation() => HtmlTag != "button" || ClickPropagation;

Do you wan't me to open a new pull request, or do you change that yourself?

Sorry for this mistake.

@henon
Copy link
Contributor

henon commented May 5, 2024

Don't worry, I am fixing it myself.

henon added a commit that referenced this pull request May 5, 2024
@ScarletKuro
Copy link
Member

ScarletKuro commented Jul 11, 2024

After going through this PR again, I noticed that it was requested to add XML documentation for this property: #8649 (comment).

However, it's missing:

[Parameter]
[Category(CategoryTypes.Menu.ClickAction)]
public bool ForceLoad { get; set; }
/// <summary>

Additionally, there is an extra new line and a missing new line after the property.

@belucha, can you please make a PR to fix it?

@belucha
Copy link
Contributor Author

belucha commented Jul 13, 2024

Sure. I'm sorry if I missed that. I will do so in about two weeks.

@ScarletKuro
Copy link
Member

Sure. I'm sorry if I missed that. I will do so in about two weeks.

Fixed already #9387
But if something is missing, feel free to PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking change This change will require consumer code updates bug Unexpected behavior or functionality not working as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

MudListItem when has Href prop and MudMenuItem when have Link prop should render an anchor element

4 participants