Skip to content

MudTextInput: Add AutoGrow feature (#7631)#7644

Merged
henon merged 6 commits intoMudBlazor:devfrom
AntMaster7:feature/mud-input-text-auto-grow
Oct 19, 2023
Merged

MudTextInput: Add AutoGrow feature (#7631)#7644
henon merged 6 commits intoMudBlazor:devfrom
AntMaster7:feature/mud-input-text-auto-grow

Conversation

@AntMaster7
Copy link
Contributor

@AntMaster7 AntMaster7 commented Oct 12, 2023

Description

Resolves #7631
By implementing an AutoGrow and MaxLines property on the MudTextField. This feature allows for the input field to grow and shrink automatically when the number of lines changes. This feature can even be seen here on github when trying to create new comments. I have update the documentation to showcase this new feature.

image

How Has This Been Tested?

Unit tests did not seem feasible in this case. The changes do not alter any logic and merely invoke JavaScript functions that alter the height of the textarea using the elements scroll offset. Although I could probably create a Unit Test that checks if the JavaScript method is invoked after the component has been rendered when the AutoGrow property is set to true. But I am not sure if thats on overkill.

I did execute the tests manually on the latest version of Microsoft Edge. I tested both the server and web assembly version. I temporarily altered the example to update the bound text value with a button click to check if the autogrow feature works too in this scenario.

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 enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library PR: needs review labels Oct 12, 2023
@AntMaster7
Copy link
Contributor Author

AntMaster7 commented Oct 13, 2023

Can someone with access to the pipeline re-run the tests? It seems that the runtime itself failed when executing the tests.

Some fixes

MudTextInput: Implement AutoGrow feature (MudBlazor#7631)
@AntMaster7 AntMaster7 force-pushed the feature/mud-input-text-auto-grow branch from 75bd561 to 3130db8 Compare October 13, 2023 15:43
@ScarletKuro ScarletKuro requested a review from henon October 14, 2023 21:10
@ScarletKuro
Copy link
Member

@fondraco adding you here, since you gave feedback on the issue, for some reason I can't add you to review

@ScarletKuro
Copy link
Member

Hmm, the test still fails so I guess something got broken? Does the test locally works? I can only look at it tmr

@codecov
Copy link

codecov bot commented Oct 14, 2023

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (86ac87b) 90.57% compared to head (16086fa) 90.57%.

Additional details and impacted files
@@           Coverage Diff           @@
##              dev    #7644   +/-   ##
=======================================
  Coverage   90.57%   90.57%           
=======================================
  Files         427      427           
  Lines       15225    15233    +8     
=======================================
+ Hits        13790    13798    +8     
  Misses       1435     1435           
Files Coverage Δ
src/MudBlazor/Components/Input/MudInput.razor 100.00% <100.00%> (ø)
src/MudBlazor/Components/Input/MudInput.razor.cs 88.70% <100.00%> (+1.67%) ⬆️
.../MudBlazor/Components/TextField/MudTextField.razor 100.00% <ø> (ø)
...dBlazor/Components/TextField/MudTextField.razor.cs 93.61% <ø> (ø)

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

@AntMaster7
Copy link
Contributor Author

@fondraco The testing issues have been resolved.

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.

LGTM, only the ambiguity about which value for MaxLines means no maximum should be resolved or documented.

@AntMaster7
Copy link
Contributor Author

I will add it to the documentation. If MaxLines is not specified, it defaults to 0 and therefore no max lines will be applied.

@ScarletKuro
Copy link
Member

@henon I know it's about MaxLines, not maximum characters, but maybe it also worth to add to the note section, that if you will input a lot of text, the blazor server side will disconnect and you need to set MaximumReceiveMessageSize for the Hub? More info here #7263

@henon
Copy link
Contributor

henon commented Oct 18, 2023

OK, maybe as a note in the general description of MudInput?

@AntMaster7
Copy link
Contributor Author

AntMaster7 commented Oct 18, 2023

@henon How about the following property description: "If AutoGrow is set to true, the input element will not grow bigger than MaxLines lines. If MaxLines is set to 0 or less, the property will be ignored"?

@henon
Copy link
Contributor

henon commented Oct 18, 2023

Clear to me.

@AntMaster7
Copy link
Contributor Author

AntMaster7 commented Oct 18, 2023

@henon @ScarletKuro Done. Regarding the maximum characters issue I could add something like this (the text is just a draft):

image

But I'm not sure if that's MudBlazor's responsibility to inform users about possible issues related to Blazor Server.

@henon
Copy link
Contributor

henon commented Oct 18, 2023

You read my mind. If you could find a way to link to the issue #7263 on github then it would be perfect.

@henon
Copy link
Contributor

henon commented Oct 18, 2023

Maybe put the notice below the multiline examples

@ScarletKuro
Copy link
Member

ScarletKuro commented Oct 18, 2023

LGTM

But I'm not sure if that's MudBlazor's responsibility to inform users about possible issues related to Blazor Server.

Well, not really, but people do create a lot of github issues that are not related to MudBlazor, like "for loop doesn't work with MudBlazor components" when it's a C# behavior and if we can decrease the workload with some advices, I'm only up for such tips and tricks. @henon what do you think?

@AntMaster7
Copy link
Contributor Author

AntMaster7 commented Oct 18, 2023

Done. Although I'm not sure if my placement of the MudAlert in the code is semantically correct. Couldn't find any example in the docs with text content below an example component. Looks like this now:

image

@henon henon changed the title MudTextInput: Implement AutoGrow feature (#7631) MudTextInput: Add AutoGrow feature (#7631) Oct 19, 2023
@henon henon merged commit 1234905 into MudBlazor:dev Oct 19, 2023
@henon
Copy link
Contributor

henon commented Oct 19, 2023

Thanks @AntMaster7, it looks good.

@nicksalt
Copy link

Hi @henon ,

We're using MudBlazor and noticed the AutoGrow feature we need has a closed PR but isn't in an official release yet. Could you share any plans for its release date?

Thank you!

@henon
Copy link
Contributor

henon commented Nov 21, 2023

Thanks for the reminder, we simply forgot to do a release. It has been released now: https://github.com/MudBlazor/MudBlazor/releases/tag/v6.11.1

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

Labels

enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

"AutoGrow" property for the MudTextField

5 participants