feat(Tab): Validation tooltips appear when not supposed to

[celadaris]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

When alternating the tabs using <Tab IsOnlyRenderActiveTab="true">, sometimes i will see that the behavour of ShowAllInvalidResult="false" breaks, and the tooltips appear after calling Validate() on some of the ValidateForm's.

Expected Behavior

Tooltips should not appear after Validate() has been called, because the Validate() behaviour should be consistent with the value of ShowAllInvalidResult.

Interactive render mode

Interactive Server (Interactive server-side rendering (interactive SSR) using Blazor Server)

Steps To Reproduce

• In the project i have a <Tab IsOnlyRenderActiveTab="true"> and in the first tab i have a child component with many ValidateForm that have the default behavour of ShowAllInvalidResult="false"

• I also have a couple different kinds of inputs within the ValidateForm each binded to a [Required] string.

• Within the OnAfterRender I want to Validate() each of the forms so that they validate when the child component initially loads.

Project:
ValidFormsBugTest.zip

Video Demonstration:

2024-09-22.13-26-07.mp4

Exceptions (if any)

No response

.NET Version

.net 8

Anything else?

No response

[bb-auto[bot]]

@celadaris Thank you for filing this issue. In order for us to investigate this issue, please provide a minimalistic repro project that illustrates the problem.

[celadaris]

This diagram demonstrates that if we choose to validate when loading then we have the ability to:

• load with tooltips, and have tooltips appear on submit
• load WITHOUT tooltips, and tooltips DONT appear on submit
• load WITHOUT tooltips, and have tooltips appear on submit

but we lack the functionality to:

• load with tooltips, and NOT have tooltips appear on submit

I personally don't have a need for the missing functionality, <SectionOutlet> could theoretically be used to add the missing functionality.

So this requires a new mechanism to uniformly manage all forms in the page

Something like a Tag specifically for validating any <ValidateForm> inside of it when the component starts with an optional tooltip visibility parameter would be really nice, which i think is what you were suggesting. It would also provide the missing functionality.

some other nice to have parameters:

• some kind of event(s) to subscribe to when it triggers would be nice.
• parameter to choose whether to trigger OnValid/OnInvalid events in the ValidateForm's that it validates.

[ArgoZhang]

@celadaris hi bro. I made some updates to the code and update the mini-repro-project. Could you please help test it? Please check if the following meets your needs. Please refer the branch feat-validate-form

ValidFormsBugTest-update.zip

[celadaris]

This works perfectly for my needs, i do see that in either scenario where we do or dont validate OnAfterRender() and we have ShowAllInvalidResult = true the tooltips don't always appear on submit after the component loads. This does not affect me and my project but could affect others.

so in Scenario 1 and 3 is where we have consistency problems.

• In Scenario 1 they appear on validate perfectly fine, and when we press submit the tooltips stay visible and its consistent, but when we hover over them and make them dissapear then hit submit, we have consistency problems.

• In Scenario 3 On the first submit, the tooltips become visible as they should consistently, but when we hover over them and make them dissapear then hit submit, we have consistency problems.

Pages.zip

2024-09-29.12-27-33.mp4

[ArgoZhang]

@celadaris

iShot_2024-09-30_08.27.24.mp4

Try clearing the cache.

[celadaris]

OHHHHHHHHHHHHHH I FIGURED IT OUT!!! haha

[celadaris]

if you type sysdm.cpl in Run and under performance click on settings, then change your settings to Adjust for best appearance then you will see the bugs, and maybe you remember, but i had the problem a while ago where i had the null error in my console, This occurs aswell from one of these settings being different. This is demonstrated in the video aswell.

2024-09-29.20-34-07.mp4

[ArgoZhang]

@celadaris Yes. Great job!!!

This is a known issue because the bootstrap style will enable animations based on system settings. this problem is very easy to reproduce caused by you turned on the animation.

@media (prefers-reduced-motion: reduce)

This problem troubles almost all users.

twbs/bootstrap#37474

Like I said, I tried many things to get rid of this error, but nothing worked.

the good news the bs team have a PR for this issue
twbs/bootstrap#40856

the bad news is this fix has not yet been merged into the master branch.

[celadaris]

Oh okay! Thank you!! Then from my testing on the tooltips things work as they should 🥳

[ArgoZhang]

@celadaris Ok. I will bump a beta version later.

this script error needs to wait for bootstrap to release a new version. give them some time.