Skip to content

Input: Make AutoGrow responsive to parameters & Fix empty line after scrollbar is hidden#8385

Merged
henon merged 6 commits intoMudBlazor:devfrom
danielchalmers:autogrow0315
Mar 20, 2024
Merged

Input: Make AutoGrow responsive to parameters & Fix empty line after scrollbar is hidden#8385
henon merged 6 commits intoMudBlazor:devfrom
danielchalmers:autogrow0315

Conversation

@danielchalmers
Copy link
Member

@danielchalmers danielchalmers commented Mar 16, 2024

Description

Input is now responsive to:

  • AutoGrow
  • Lines
  • MaxLines

In respect to auto-growing.

You can turn AutoGrow off and on or change the MaxLines etc.
The events subscribed by AutoGrow will be unsubscribed on dispose or when AutoGrow is disabled.

In addition, an empty line that would appear when the scrollbar is hidden has been taken care of by forcing a reflow.

How Has This Been Tested?

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)

In this video you can see how responsive it is now and how the event listeners are properly removed.

Video2.mp4

This was not possible and now is:

Video2.mp4

Then we have the empty line issue:

Video2.mp4
Video3.mp4

Which now looks like

Video4.mp4

We could go even further and test if the scrollbar can be removed so it reflows one line earlier (7 instead of 8 in the last video) but I'll save that for another time.

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 bug Unexpected behavior or functionality not working as intended PR: needs review labels Mar 16, 2024
@codecov
Copy link

codecov bot commented Mar 16, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.89%. Comparing base (345ec7c) to head (5df4023).
Report is 13 commits behind head on dev.

Additional details and impacted files
@@            Coverage Diff             @@
##              dev    #8385      +/-   ##
==========================================
+ Coverage   88.82%   88.89%   +0.06%     
==========================================
  Files         407      407              
  Lines       12226    12226              
  Branches     2441     2441              
==========================================
+ Hits        10860    10868       +8     
+ Misses        834      829       -5     
+ Partials      532      529       -3     

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

@ScarletKuro
Copy link
Member

For future, it's really bad to call JS like this #7155
You will get exception during static / pre-rendering.
For example, when you instantiate a component for first time, the first thing that will fire is SetParametersAsync, but the browser is not yet attached therefore JS runtime is not available. It will only be available after OnAfterRenderAsync.
Dispose can as well fire before the OnAfterRenderAsync in certain scenarios.
For this case we have IsJSRuntimeAvailable property that you need to check every-time you do a call outside of OnAfterRenderAsync like in the Dispose method or SetParametersAsync

@ScarletKuro ScarletKuro requested a review from henon March 17, 2024 00:32
@danielchalmers
Copy link
Member Author

For future, it's really bad to call JS like this #7155 You will get exception during static / pre-rendering. For example, when you instantiate a component for first time, the first thing that will fire is SetParametersAsync, but the browser is not yet attached therefore JS runtime is not available. It will only be available after OnAfterRenderAsync. Dispose can as well fire before the OnAfterRenderAsync in certain scenarios. For this case we have IsJSRuntimeAvailable property that you need to check every-time you do a call outside of OnAfterRenderAsync like in the Dispose method or SetParametersAsync

Interesting, I'll take care of that, thanks!

@ScarletKuro
Copy link
Member

ScarletKuro commented Mar 17, 2024

I guess it's too late for me, but what is the difference of this

if (!oldAutoGrow && AutoGrow)
{
	_shouldInitAutoGrow = true;
}
else if (oldAutoGrow && !AutoGrow)
{
	_shouldInitAutoGrow = false;
	await JsRuntime.InvokeVoidAsyncWithErrorHandling("mudInputAutoGrow.destroy", ElementReference);
}

if (firstRender || _shouldInitAutoGrow)
{
	_shouldInitAutoGrow = false;
	await JsRuntime.InvokeVoidAsyncWithErrorHandling("mudInputAutoGrow.initAutoGrow", ElementReference, MaxLines);
	_oldText = _internalText;
}

Compared to what it was without the _shouldInitAutoGrow
and checking AutoGrow && firstRender?
To not call it multiple times?

@ScarletKuro
Copy link
Member

I'm asking because we'd be able to use ParameterState, but this lines
(!oldAutoGrow && AutoGrow) and (oldAutoGrow && !AutoGrow) makes it harder, since for now we only know that the parameter changed and it's current value, but not the previous value.
@henon what do you think

@danielchalmers
Copy link
Member Author

danielchalmers commented Mar 17, 2024

@ScarletKuro firstRender isn't enough because it also needs to update when the parameter changes so you can perform bindings. but if it hasn't been rendered yet it needs to defer to the firstRender.

enables this:

Video2.mp4

@danielchalmers danielchalmers changed the title Input: Make AutoGrow responsive to parameters and dispose event Input: Make AutoGrow responsive to parameters & Fix empty line after scrollbar is hidden Mar 17, 2024
@henon
Copy link
Contributor

henon commented Mar 20, 2024

I'm asking because we'd be able to use ParameterState, but this lines (!oldAutoGrow && AutoGrow) and (oldAutoGrow && !AutoGrow) makes it harder, since for now we only know that the parameter changed and it's current value, but not the previous value. @henon what do you think

We have found a use-case for the oldValue/newValue event args sooner than I'd have expected. Good that the ParameterState framework supports them now!

@henon henon added enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library bug Unexpected behavior or functionality not working as intended and removed bug Unexpected behavior or functionality not working as intended PR: needs review labels Mar 20, 2024
@henon henon merged commit 349de1f into MudBlazor:dev Mar 20, 2024
@henon
Copy link
Contributor

henon commented Mar 20, 2024

Thanks Daniel

@danielchalmers danielchalmers deleted the autogrow0315 branch April 4, 2024 23:45
biegehydra pushed a commit to biegehydra/MudBlazor that referenced this pull request Apr 26, 2024
…scrollbar is hidden (MudBlazor#8385)

* Input: Responsive to parameters & Dispose events
* Ensure JS runtime is available
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Unexpected behavior or functionality not working as intended 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.

3 participants