Setting SfTab.SelectedItem after Page Load Results in Unexpected Scroll
Please see this SLN:
https://github.com/Mike-E-angelo/Stash/tree/master/Syncfusion.Tabs
Upon launching, press the Click Me button.
Expected: page does not scroll
Actual: page scrolls
I do not see any attribute to control this behavior. Any guidance/insight/suggestions would be appreciated.
Hi Mike,
Refer the below code snippet with "Click Me" button. The button click event handler OnClick() is implemented to enable scrolling on subsequent clicks. The _index variable is set to 1 to select the second tab, and tabRef.SelectAsync(_index) is used to programmatically select the tab. The onSelected() event handler is used to focus the "Click Me" button after the tab selection. Let us know if you need any further assistance.
[index.razor]
|
<Syncfusion.Blazor.Buttons.SfButton @ref="btnClick" CssClass="button small" type="button" OnClick="@OnClick">Click Me</Syncfusion.Blazor.Buttons.SfButton>
<SfTab @ref="tabRef" CssClass="default-tab e-fill"> <TabEvents Selected="onSelected"></TabEvents> <TabItems> <TabItem> <ChildContent> <TabHeader Text="First"></TabHeader> </ChildContent> </TabItem> <TabItem> <ChildContent> <TabHeader Text="Second"></TabHeader> </ChildContent>
</TabItem> <TabItem> <ChildContent> <TabHeader Text="Third"></TabHeader> </ChildContent> </TabItem> </TabItems> </SfTab>
@code { SfButton btnClick; SfTab tabRef; int _index; Task OnClick() { _index = 1; tabRef.SelectAsync(_index); return Task.CompletedTask; }
public void onSelected(SelectEventArgs args) { btnClick.FocusAsync(); }
} |
Regards,
Vijay Ravi
Attachment: blazor_tabs_b00c821a.zip
Hi Vijay,
Thank you for your reply. Unfortunately, there is some confusion about my report. The issue is that when the Click Me button in the solution I provided is pressed, the page scroll changes, can you please confirm? If so, this is unexpected. Further, why does this happen for any index besides 0 but not on zero? I would like to disable this functionality and do not see any way to control it.
Thank you,
Michael
Thank you for your reply, Satheesh.
To start, please do not worry about the button. The button is only there to invoke unexpected behavior. In the actual case that I am experiencing in production, the user clicks on a link within the SfTab of the tab control, and then presses the back button on their browser/mouse. I am also storing that tab control's SelectedItem in sessionStorage. When it is bound to that control, after the page has loaded, the scroll is no longer accurate due to other items on the page having loaded and scrolled down.
The user is then left in a confusing place which leads to a poor experience.
Unfortunately, this behavior seems backward to me. It would seem to me that the scroll should only occur when you invoke a method (SelectAsync), and that method should have a parameter of whether that scroll should be invoked. Scrolling on a data-binding event seems unexpected and unintuitive and should at the least be controlled by an additional property on the control to prevent this behavior in situations such as what I am encountering.
Thank you for your consideration.
Hi Mike,
We confirmed your reported problem “Selecting SfTab item after page load results in unexpected scroll” as a bug and logged the defect report. The fix for this defect will be included in our upcoming weekly patch release, which is expected to be rolled out by July 12, 2023. You can track the status of the fix at the following link:
Disclaimer: Inclusion of this solution in the weekly release
may change due to other factors including but not limited to QA checks and works reprioritization.
Regards,
Satheesh Kumar B
Thank you very much Satheesh and team for all your efforts out there!
Hi Mike,
You are welcome. We will let you know once the fix for the issue will be included.
Regards,
Ravikumar Venkatesan
Hi Mike,
We are glad to announce that our Essential Studio 2023 Volume 2 SP release v22.2.5 is rolled out and is available for download under the following link.
In this release, we have provided PreventFocus support in SelectEventArgs to prevent the focus while selecting the tab item. So we suggest upgrading your package version to the latest to avail of this fix. You can give PreventFocus value as true like this to prevent the focus while selecting the tab item.
public void onSelected(SelectEventArgs args) { args.PreventFocus = true; } |
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.
Regards,
Satheesh Kumar B
HI Satheesh,
Thank you again for your assistance here. I did try the latest version, and while it does attend to the reported issue, I still seem to be having scrollY state issues when the SelectedIndex is set on an SfTab control and I mouse back and forward on my pages.
Unfortunately I cannot provide a simple reproduction at the moment. However, I wanted to inquire if there are any other scrollY operations that are performed by SfTab?
Thank you for any further assistance.
[index.razor]
<SfTab @ref="tabRef" CssClass="default-tab e-fill"> <TabEvents Selected="onSelected"></TabEvents> <TabItems> <TabItem> <ChildContent> <TabHeader Text="First"></TabHeader> </ChildContent> </TabItem> <TabItem> <ChildContent> <TabHeader Text="Second"></TabHeader> </ChildContent> </TabItem> <TabItem> <ChildContent> <TabHeader Text="Third"></TabHeader> </ChildContent> </TabItem> </TabItems> </SfTab> @code { int _index; SfTab tabRef; Task OnClick() { _index = 1; tabRef.SelectAsync(_index); return Task.CompletedTask; } public void onSelected(SelectEventArgs args) { args.PreventFocus = true; } } |
Attachment: Syncfusion.Tabs_cd970776.zip
Thank you for the guidance and time Satheesh.
Are you saying then there is a scrollY adjustment occurring when a tab is selected even if PreventFocus = true? If so, I again say that this is unexpected behavior. I would greatly appreciate having a EnableAutomaticScrollFocus="false" attribute on the SfTab that disables all scrollY modifications on the page/document. Thank you for your consideration of this.
Outside of this, if I was using your solution above, how do I know that the _index is 1 for the second tab? and _index = 2 for the 3rd tab, and so on?
Thank you for your consideration and continued assistance.
Thank you for your reply, Satheesh. I hope you can understand the concern here of having the document scrollY modified unintentionally by any control, regardless of the SfTab. It is unclear to me why such behavior is provided in SfTab and especially with such a common scenario as databinding.
Are you able to confirm if other control toolkits such as Telerik also enlist in such behavior as well? I suppose I would understand better if this were the case.
Sorry for being such a nuisance, but the amount of work that I now have to do for your control to work as expected is making me look at other tab controls for a simpler solution. :(
Hi Mike,
We confirmed your reported problem “Prevent the unexpected scroll when selecting the SfTab item” as a bug and logged the defect report. The fix for this defect will be included in our upcoming weekly patch release, which is expected to be rolled out by August 29, 2023. You can track the status of the fix at the following link:
Disclaimer: Inclusion of this solution in the weekly release
may change due to other factors including but not limited to QA checks and works reprioritization.
Regards,
Satheesh Kumar B
Hi Mike,
We are glad to announce that our Essential Studio 2023 Volume 3 release v23.1.36 is rolled out and is available for download under the following link.
The fix for the issue “Tab Header was receiving focus during the selection of an SfTab item, leading to unexpected scrolling” has been included in our volume 3 release v23.1.36. Upgrade to the latest version to resolve the issue.
Regards,
Satheesh
- 15 Replies
- 4 Participants
-
MI Mike-E
- Jun 26, 2023 01:14 PM UTC
- Sep 21, 2023 10:21 AM UTC
