fix(module:textarea): fix style string format and auto-size issues #2001

anranruye · 2021-10-05T04:49:39Z

🤔 This is a ...

🔗 Related issue link

Fixes #1997
Fixes #1998

💡 Background and solution

AutoSize doesn't work when:

Change value by code
Change TextArea width(eg. TextArea width is changed with the window resize)
TextArea has a initial value

📝 Changelog

Language	Changelog
🇺🇸 English	fix style string format; fix auto-size issues
🇨🇳 Chinese

☑️ 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
Changelog is provided or not needed

github-actions · 2021-10-05T04:49:52Z

codecov · 2021-10-05T05:00:29Z

Codecov Report

Merging #2001 (acf3402) into master (e698e40) will increase coverage by 2.03%.
The diff coverage is 55.38%.

@@            Coverage Diff             @@
##           master    #2001      +/-   ##
==========================================
+ Coverage   27.57%   29.60%   +2.03%     
==========================================
  Files         489      512      +23     
  Lines       32243    24612    -7631     
  Branches        0      240     +240     
==========================================
- Hits         8890     7287    -1603     
+ Misses      23353    17289    -6064     
- Partials        0       36      +36

Impacted Files	Coverage Δ
components/core/Base/AntDomComponentBase.cs	`96.15% <ø> (+4.48%)`	⬆️
components/core/JsInterop/JSInteropConstants.cs	`29.31% <0.00%> (-0.52%)`	⬇️
...s/core/JsInterop/modules/components/inputHelper.ts	`0.00% <0.00%> (ø)`
components/core/JsInterop/modules/styleHelper.ts	`4.54% <0.00%> (ø)`
components/input/TextArea.razor.cs	`74.28% <73.52%> (-6.29%)`	⬇️
components/input/TextArea.razor	`94.44% <100.00%> (+9.07%)`	⬆️
components/core/Helpers/MemberPath/PathNode.cs	`46.15% <0.00%> (-8.85%)`	⬇️
components/core/Reflection/TypeDefined.cs	`77.77% <0.00%> (-7.94%)`	⬇️
components/input/InputGroup.razor.cs	`87.50% <0.00%> (-6.95%)`	⬇️
components/tabs/TabPane.razor	`86.66% <0.00%> (-6.20%)`	⬇️
... and 428 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e698e40...acf3402. Read the comment docs.

anddrzejb · 2021-10-05T18:42:41Z

What happened here? It looked like a legitimate fix. You found some more issues with this?

anranruye · 2021-10-06T01:41:50Z

@anddrzejb No, there is no more issue. I just wrongly made the changes on my default branch but not a new branch.

ElderJames · 2021-10-10T13:34:41Z

components/input/TextArea.razor.cs

+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            await base.OnAfterRenderAsync(firstRender);


We need to call JS after firstRender.

js is called in OnFirstAfterRenderAsync method.

site/AntDesign.Docs/Demos/Components/Input/demo/Area.md

Co-authored-by: James Yeung <shunjiey@hotmail.com>

anddrzejb · 2021-10-19T15:48:47Z

components/input/TextArea.razor

@@ -5,7 +5,7 @@
    Dictionary<string, object> attributes =
        new Dictionary<string, object>()
        {
-            { "onchange", CallbackFactory.Create(this, OnChangeAsync) },
+            { "onchange", EventUtil.AsNonRenderingEventHandler<ChangeEventArgs>(e => OnChangeAsync(e)) },


I am sorry, I might not have been clear enough...to avoid unnecessary re-renderings, you actually have to change all of them:

{ "onchange", EventUtil.AsNonRenderingEventHandler<ChangeEventArgs>(e => OnChangeAsync(e)) }, { "onblur", EventUtil.AsNonRenderingEventHandler<FocusEventArgs>(e => OnBlurAsync(e)) }, { "oninput", EventUtil.AsNonRenderingEventHandler<ChangeEventArgs>(e => OnInputAsync(e)) }, { "onkeypress", EventUtil.AsNonRenderingEventHandler<KeyboardEventArgs>(e => OnKeyPressAsync(e)) }, { "onkeyup", EventUtil.AsNonRenderingEventHandler<KeyboardEventArgs>(e => OnKeyUpAsync(e)) }, { "onkeydown", EventUtil.AsNonRenderingEventHandler<KeyboardEventArgs>(e => OnkeyDownAsync(e)) }, { "onfocus", EventUtil.AsNonRenderingEventHandler<FocusEventArgs>(e => OnFocusAsync(e)) },

You can just copy-paste, this is what I was using in my tests.

There is something wrong with the no value-binding scenario. So I had to add the event callbacks again.
With event callbacks:

With NonRenderingEventHandlers:

razor code:

<TextArea Placeholder="Autosize height based on content lines" AutoSize="true" />

I think we can do more reasearch later and apply this change in another pr.

anddrzejb

LGTM

ElderJames · 2021-10-21T05:32:08Z

Some tests was failed.

anddrzejb · 2021-10-21T07:28:53Z

From the look of it, the tests:

TextArea_MaxRows_will_take_precedence_over_Rows()
TextArea_MinRows_creates_with_expected_height()
TextArea_Rows_creates_with_expected_height()

should probably be removed or moved to ts tests, since all these are testing is now done in js.

TextArea_ShowCount_increase() - this is a simple one. Add cut.Render() after cut.Find("textarea").KeyUp(String.Empty) and it will pass.

…2001) * fix(module:textarea): fix style string format * seprate inner and outer style * fix AutoSize * fix custom style * Update site/AntDesign.Docs/Demos/Components/Input/demo/Area.md Co-authored-by: James Yeung <shunjiey@hotmail.com> * Move SetStyle to styleHelper * Update TextArea.razor * Update TextArea.cs * fix unit test Co-authored-by: James Yeung <shunjiey@hotmail.com>

fix(module:textarea): fix style string format

1cc8a20

pr-triage bot added the PR: unreviewed label Oct 5, 2021

anranruye deleted the branch ant-design-blazor:master October 5, 2021 07:41

anranruye closed this Oct 5, 2021

anranruye deleted the master branch October 5, 2021 07:41

anranruye restored the master branch October 6, 2021 01:37

anranruye deleted the master branch October 6, 2021 01:37

anranruye restored the master branch October 6, 2021 01:40

anranruye reopened this Oct 6, 2021

anranruye added 2 commits October 6, 2021 13:21

seprate inner and outer style

e5b6fac

fix AutoSize

a3d9713

anranruye changed the title ~~fix(module:textarea): fix style string format~~ fix(module:textarea): fix style string format and auto-size issues Oct 6, 2021

anranruye marked this pull request as draft October 7, 2021 17:00

fix custom style

868e854

pr-triage bot added PR: draft and removed PR: unreviewed labels Oct 8, 2021

anranruye marked this pull request as ready for review October 8, 2021 15:49

pr-triage bot added PR: unreviewed and removed PR: draft labels Oct 8, 2021

Merge branch 'master' into master

c998ff7

anranruye requested review from anddrzejb and ElderJames October 8, 2021 15:49

ElderJames reviewed Oct 10, 2021

View reviewed changes

anranruye and others added 3 commits October 11, 2021 17:20

Update site/AntDesign.Docs/Demos/Components/Input/demo/Area.md

b1c348f

Co-authored-by: James Yeung <shunjiey@hotmail.com>

Merge branch 'master' into master

838d11d

Merge branch 'master' into master

313d1a4

anddrzejb suggested changes Oct 19, 2021

View reviewed changes

pr-triage bot added PR: reviewed-changes-requested and removed PR: unreviewed labels Oct 19, 2021

Update TextArea.razor

12ac405

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels Oct 20, 2021

Merge branch 'master' into master

6a6e138

anranruye requested a review from anddrzejb October 20, 2021 16:03

anddrzejb approved these changes Oct 20, 2021

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels Oct 20, 2021

anranruye added 2 commits October 21, 2021 00:10

Update TextArea.cs

6955df3

Merge branch 'master' of https://github.com/anranruye/ant-design-blazor

71f2cc1

pr-triage bot added PR: unreviewed and removed PR: reviewed-approved labels Oct 20, 2021

anranruye and others added 2 commits October 29, 2021 00:01

fix unit test

d17e8bb

Merge branch 'master' into master

acf3402

anddrzejb approved these changes Oct 28, 2021

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels Oct 28, 2021

ElderJames approved these changes Oct 29, 2021

View reviewed changes

ElderJames merged commit f54ae99 into ant-design-blazor:master Oct 29, 2021

pr-triage bot added PR: merged and removed PR: reviewed-approved labels Oct 29, 2021

anranruye deleted the master branch October 29, 2021 13:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(module:textarea): fix style string format and auto-size issues #2001

fix(module:textarea): fix style string format and auto-size issues #2001

anranruye commented Oct 5, 2021 •

edited

github-actions bot commented Oct 5, 2021 •

edited

codecov bot commented Oct 5, 2021 •

edited

anddrzejb commented Oct 5, 2021

anranruye commented Oct 6, 2021 •

edited

ElderJames Oct 10, 2021

anranruye Oct 11, 2021 •

edited

anddrzejb Oct 19, 2021

anranruye Oct 28, 2021

anddrzejb left a comment

ElderJames commented Oct 21, 2021

anddrzejb commented Oct 21, 2021

fix(module:textarea): fix style string format and auto-size issues #2001

fix(module:textarea): fix style string format and auto-size issues #2001

Conversation

anranruye commented Oct 5, 2021 • edited

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self Check before Merge

github-actions bot commented Oct 5, 2021 • edited

codecov bot commented Oct 5, 2021 • edited

Codecov Report

anddrzejb commented Oct 5, 2021

anranruye commented Oct 6, 2021 • edited

ElderJames Oct 10, 2021

Choose a reason for hiding this comment

anranruye Oct 11, 2021 • edited

Choose a reason for hiding this comment

anddrzejb Oct 19, 2021

Choose a reason for hiding this comment

anranruye Oct 28, 2021

Choose a reason for hiding this comment

anddrzejb left a comment

Choose a reason for hiding this comment

ElderJames commented Oct 21, 2021

anddrzejb commented Oct 21, 2021

anranruye commented Oct 5, 2021 •

edited

github-actions bot commented Oct 5, 2021 •

edited

codecov bot commented Oct 5, 2021 •

edited

anranruye commented Oct 6, 2021 •

edited

anranruye Oct 11, 2021 •

edited