How to preserve scroll state when calling router.refresh() in Next JS app router
I'm in a Next JS 13 app router page with the following layout:
When clicking on a star icon, I'm updating some state in the DB and the containing card (green client cmp) is moved to the top of the list as a consequence. To update the list (brown server cmp), I'm calling router.refresh() after performing the DB update.
Unfortunately, this call to router.refresh() resets the scroll position of the list and I'm "moved" back to the top of the list which is rather unpleasant as a user.
Is there a way for me to actively prevent this change to the scroll position?
I just realized that this has nothing to do with server components & router refresh at all. This also happens in a vanilla react client component without anything Next specific and the reason is that I'm updating the order of keys in my rendered list when moving the newly starred item to the top.
Can be fixed by simply applying CSS overflow-anchor: none to each list item.
I found the answer here, where you can find more details about why this is happening in the first place.
- Order() in R - argument is missing, with no default
- How to plot geom_bar without showing multiple lines
- R: speeding up "group by" operations
- How to manipulate NetCDF-4 groups in R?
- How to convert categorial raster to mapped RGB values in R?
- How to add a hover-over tooltip to rhandonstable header cell?
- How to detect the right encoding for read.csv?
- Rcpp Rf_warningcall compiler warnings
- Modify the name of factor variables in lm function(summary function)
- Extreme value analysis and quantile estimation using log Pearson type 3 (Pearson III) distribution - R vs Python
- How to hide NAs when using xlsx::saveWorkbook?
- How do I retrieve a simple numeric value from a named numeric vector in R?
- Adding an image in navbar and adjusting alignment in Rmarkdown
- Matching pair-wise columns from left to right across rows in one dataframe to another dataframe and adding new columns with matching values
- Income to outcome flow chart in Sankey plotly R
- color mapping in geom_conn_bundle not showing correctly
- Print R package startup message AFTER automatic package conflict messages instead of before
- Summing a set of R dataframe rows (column-wise), while retaining the first n columns
- Added variable / partial regression plots for groups in an interaction?
- how to make a topoplot in R with coordinates variable distribution
- List of all functions in base R?
- Plotting multiple plots for different initial conditions in one graph
- Printing repetitively on the same line in R
- Generating UI/Server based on initial selection
- Subset dataframe based on pickerInput
- How to let user pick the data in R-shiny?
- Couldn't show my simple bar charts separately on Shiny R dashboardBody
- How to programmatically filter contents of a second shiny app displayed via iframe
- How to select specific interesting groups for the boxplot in R Shiny app?
- Crosstable and Plot grouping with reactive values