Missing scroll inside RequirementBreakdown when focusing

Author: antoineatrhea

UI_DSM.Client/Components/App/CommentCard/CommentCard.razor

@@ -105,7 +105,7 @@
 			<AppAccordion Label="Linked Items" Variant="AppAccordion.VariantValue.Reply" @bind-PanelOpen="@this.IsPanelOpen">
 				@foreach (var linkedItem in this.ViewModel.LinkedRows.DistinctBy(x => x.Id).OrderBy(x => x.Id))
 				{
-					<button @ondblclick="() => this.OnDoubleClick(linkedItem.Id)">@linkedItem.Id</button>
+					<button class="app-comment__linked" @ondblclick="() => this.OnDoubleClick(linkedItem.Id)">@linkedItem.Id</button>
 				}
 			</AppAccordion>
 		</div>

UI_DSM.Client/Components/App/CommentCard/CommentCard.razor.css

@@ -59,4 +59,8 @@
 .app-comment__replies {
   padding-top: var(--spacing-2);
   border-top: 1px solid var(--colors-gray-50)
+}
+
+.app-comment__linked {
+    margin-right: 5px;
 }

UI_DSM.Client/Components/NormalUser/Views/RequirementBreakdownStructureView.razor

@@ -46,6 +46,7 @@
 					<CellDisplayTemplate>
 						@if (context.DataItem is RequirementRowViewModel row)
 						{
+							<span id="row_@row.ThingId"></span>
 							<HaveThingRowIcons Row="row"/>
 						}
 					</CellDisplayTemplate>

UI_DSM.Client/Components/NormalUser/Views/RequirementBreakdownStructureView.razor.cs

@@ -19,6 +19,9 @@ namespace UI_DSM.Client.Components.NormalUser.Views
 
     using DevExpress.Blazor;
 
+    using Microsoft.AspNetCore.Components;
+    using Microsoft.JSInterop;
+
     using ReactiveUI;
 
     using UI_DSM.Client.ViewModels.Components.NormalUser.Views;
@@ -35,11 +38,22 @@ public partial class RequirementBreakdownStructureView : GenericBaseView<IRequir
         /// </summary>
         private readonly List<IDisposable> disposables = new();
 
+        /// <summary>
+        ///     Id of the element where the view should scroll to
+        /// </summary>
+        private Guid idToScrollTo;
+
         /// <summary>
         ///     The <see cref="DxGrid" />
         /// </summary>
         protected DxGrid DxGrid { get; set; }
 
+        /// <summary>
+        ///     The <see cref="IJSRuntime" />
+        /// </summary>
+        [Inject]
+        public IJSRuntime JsRuntime { get; set; }
+
         /// <summary>
         ///     Performs application-defined tasks associated with freeing, releasing, or resetting unmanaged resources.
         /// </summary>
@@ -70,11 +84,16 @@ public async Task<bool> CopyComponents(BaseView otherView)
         /// </summary>
         /// <param name="itemName">The name of the item to navigate to</param>
         /// <returns>A <see cref="Task" /></returns>
-        public override Task TryNavigateToItem(string itemName)
+        public override async Task TryNavigateToItem(string itemName)
         {
             var item = this.ViewModel.Rows.FirstOrDefault(x => string.Equals(itemName, x.Id, StringComparison.InvariantCultureIgnoreCase));
 
-            return item != null ? this.DxGrid.SetFocusedDataItemAsync(item) : Task.CompletedTask;
+            if (item != null)
+            {
+                await this.DxGrid.SetFocusedDataItemAsync(item);
+                this.idToScrollTo = item.ThingId;
+                await this.HasChanged();
+            }
         }
 
         /// <summary>
@@ -86,7 +105,7 @@ public override Task TryNavigateToItem(string itemName)
         /// <param name="reviewTaskId">The <see cref="ReviewTask" /> id</param>
         /// <param name="prefilters">A collection of prefilters</param>
         /// <param name="additionnalColumnsVisibleAtStart">A collection of columns name that can be visible by default at start</param>
-        /// <param name="participant">The current <see cref="Participant"/></param>
+        /// <param name="participant">The current <see cref="Participant" /></param>
         /// <returns>A <see cref="Task" /></returns>
         public override async Task InitializeViewModel(IEnumerable<Thing> things, Guid projectId, Guid reviewId, Guid reviewTaskId, List<string> prefilters, List<string> additionnalColumnsVisibleAtStart, Participant participant)
         {
@@ -116,6 +135,35 @@ protected void OnClick()
             this.DxGrid.ShowColumnChooser("#column-chooser");
         }
 
+        /// <summary>
+        ///     Method invoked after each time the component has been rendered. Note that the component does
+        ///     not automatically re-render after the completion of any returned <see cref="T:System.Threading.Tasks.Task" />, because
+        ///     that would cause an infinite render loop.
+        /// </summary>
+        /// <param name="firstRender">
+        ///     Set to <c>true</c> if this is the first time
+        ///     <see cref="M:Microsoft.AspNetCore.Components.ComponentBase.OnAfterRender(System.Boolean)" /> has been invoked
+        ///     on this component instance; otherwise <c>false</c>.
+        /// </param>
+        /// <returns>A <see cref="T:System.Threading.Tasks.Task" /> representing any asynchronous operation.</returns>
+        /// <remarks>
+        ///     The <see cref="M:Microsoft.AspNetCore.Components.ComponentBase.OnAfterRender(System.Boolean)" /> and
+        ///     <see cref="M:Microsoft.AspNetCore.Components.ComponentBase.OnAfterRenderAsync(System.Boolean)" /> lifecycle methods
+        ///     are useful for performing interop, or interacting with values received from <c>@ref</c>.
+        ///     Use the <paramref name="firstRender" /> parameter to ensure that initialization work is only performed
+        ///     once.
+        /// </remarks>
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            await base.OnAfterRenderAsync(firstRender);
+
+            if (this.idToScrollTo != Guid.Empty)
+            {
+                await this.JsRuntime.InvokeVoidAsync("scrollToElement", $"row_{this.idToScrollTo}", "center", "center");
+                this.idToScrollTo = Guid.Empty;
+            }
+        }
+
         /// <summary>
         ///     Apply the filtering on rows
         /// </summary>

UI_DSM.Client/Components/NormalUser/Views/RequirementVerificationControlView.razor

@@ -45,6 +45,7 @@
 				<CellDisplayTemplate>
 					@if (context.DataItem is RequirementRowViewModel row)
 					{
+						<span id="row_@row.ThingId"></span>
 						<HaveThingRowIcons Row="row"/>
 					}
 				</CellDisplayTemplate>

UI_DSM.Client/UI_DSM.Client.csproj

@@ -2,7 +2,7 @@
   <PropertyGroup>
     <TargetFramework>net6.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
-    <AssemblyVersion>1.6.3</AssemblyVersion>
+    <AssemblyVersion>1.6.4</AssemblyVersion>
   </PropertyGroup>
   <ItemGroup>
     <PackageReference Include="Blazored.SessionStorage" Version="2.2.0" />