Column Width and Page Size Broken When Using Responsive Table
jtbrown2-bsu opened this issue · comments
Have you searched through other issues to see if your problem is already reported or has been fixed?
Yes, I did not find it.
Did you read the documentation?
Yes, I did not find it.
Have you tried to publish the views?
Yes - I didn't work.
Is there an error in the console?
Yes. I will describe below.
PHP Version
8.3.6
PowerGrid
5.7.1
Laravel
11.7.0
Livewire
3.4.12
Alpine JS
3.14.0
Theme
Tailwind 3.x with tailwind/forms
Describe the bug.
I have a simple Responsive PowerGrid Table with four columns, a bulk checkbox column, and an actions column. Whenever I have responsive mode on (just using Responsive::make()), multiple parts are messed up. One, the Actions column will become hidden in the details box no matter whether I specify Responsive::ACTIONS_COLUMN_NAME in the fixedColumns section or not. If I resize the page, it will disappear, and on sizing it back to normal, it remains hidden. Strangely enough, this also occurs when sorting. Here are two examples using images.
Here is the table before I sort anything.
Upon sorting the Number column, the Actions column disappears despite there being space for it. Sorting again causes it to remain hidden still.
The amount of rows per page is also affected. If I were to select All, then sort, causing the Actions column to collapse, it resets back to the default of 10 rows per page despite it displaying "Showing 1 to 26 of 26 Results".
Both the issue of the disappearing Actions column and the page size issue results in the following console error every time I click a header to sort:
livewire.js?id=770f7738:8348 Uncaught TypeError: Cannot read properties of undefined (reading 'before')
at Block.appendChild (livewire.js?id=770f7738:8348:23)
at patchChildren (livewire.js?id=770f7738:8176:21)
at patchChildren (livewire.js?id=770f7738:8218:11)
at patchChildren (livewire.js?id=770f7738:8218:11)
at patchChildren (livewire.js?id=770f7738:8218:11)
at patchChildren (livewire.js?id=770f7738:8218:11)
at patch (livewire.js?id=770f7738:8113:7)
at patchChildren (livewire.js?id=770f7738:8265:9)
at patch (livewire.js?id=770f7738:8113:7)
at patchChildren (livewire.js?id=770f7738:8265:9)
These issues are fixed if I remove the Responsive part from the setUp function.
To Reproduce...
These issues are present on the Demo site as well.
First, if you sort by In Stock, you will see that the In Stock option disappears into the details dropdown.
Also, if you resize the page until the details dropdown happens, and then size the page back up, you will still see the dropdown even though there was space before resizing the window. This only happens to me on my desktop, even though it and my laptop are both running Chrome 125.0.6422.142 at 1920x1080. If there is any extra information needed for this bug particularly, then let me know.
Lastly, if you set the page size to be All, it will say "Showing 1 to 192 of 192 Results" at the bottom right. If you then sort by any column, you will see the row count shrink down despite the selector still displaying "All" and the text at the bottom right still saying there are 192 results. Changing the page size afterwards does nothing.
There will be console errors as well when trying to sort.
Extra information
No response
I have found that by adding ->fixedOnResponsive() to the Actions column in the column definitions, I can finally make the Actions column not disappear into the details. However, this still causes the next column to disappear into the details when sorting, and fixes neither the problems/console errors with pagination nor the console errors when sorting.
This means that the Actions column is not fixed by default and the ->fixedColumns() method recommended in the docs does not work when applied to Responsive::make(), you must use ->fixedOnResponsive() on the column.
Could anyone record a video to understand the problem?
It may be normal to remove the "details" after sorting. This happens due to the window size being different from the previous state.
Here is an unlisted YouTube video I recorded to show the problems.
The description describes the bugs shown in the video, but to make it easier to quote I'll copy it here as well.
This uses the Livewire PowerGrid Demo site's responsive showcase, which has a few bugs.
First, when clicking In Stock to sort, it collapses that column into the details view. This can be circumvented by making the column fixed in responsive mode, but I don't see why it should collapse in the first place considering that the column has the same width for in stock and not in stock; it uses the same switch component.
When sorting first by that In Stock column, you see console errors. However, if you sort by a column that doesn't cause a collapse, such as Calories, and then sort by In Stock, there are no console errors.
The items per page functionality also breaks on this. I select All to show all 192 results. But when I sort by In Stock again, it reverts back to showing only 10 results despite saying it is showing all 192.
Some columns also collapse to the details view when resizing the viewport, but then reverts back to normal when shrinking more. This causes the jittering shown in the last part of the video. If it shrinks to the details view at a certain width, meaning there is not enough space for those columns, then why would it expand back to normal when there is less space in the viewport?
I have the same error, when searching. When typing something in search input, and click clear button, the error in console shown. The paginator has missing first and last buttons.
I found that problem is in pagination.blade.php at line 120:
@if ($paginator->hasMorePages()) @if ($paginator->lastPage() - $paginator->currentPage() >= 2)
but I have no idea how to fix it.
The two problems found are caused by the "Inject morph markers" feature being enabled. At the moment, the ideal would be to disable this by default, as the solution to this depends on a lot of refactoring and we may not achieve a good result.
https://livewire.laravel.com/docs/morphing#injecting-morph-markers
'inject_morph_markers' => false,I have also updated the demo to remove this.
Thanks!