livewire / livewire

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.
MIT License
22.35k stars 1.56k forks source link

WithPagination removes element from custom paginator template #1387

Closed MaxGiting closed 4 years ago

MaxGiting commented 4 years ago

When using a custom pagination template I have seen strange behaviour. Below are three images in chronological order. When I go from page 1 -> 3 -> 1 the word to is removed from the custom paginator template. I have linked an example repo below that is a fresh Laravel install with livewire a custom pagination template and nothing else.

Start on page 1

page1-correct

Click to page 3

page3-correct

Click back to page 1 and the word to has been removed

page1-wrong

I have narrowed it down to the custom-paginator.blade.php file I have used for the pagination.

    Showing
    <span>{{ $paginator->firstItem() }}</span>
    to
    <span>{{ $paginator->lastItem() }}</span>
    of
    <span>{{ $paginator->total() }}</span>
    results

If I remove the <span> tags then the word of does not disappear. It does disappear if the word of is between any element tags.

Steps to reproduce

Context

JayBizzle commented 4 years ago

Also, when you go from 1 to 3, if you notice, the space between the 1 and the 2 button disappears

mpbarlow commented 4 years ago

This is the same issue as #1344. If there are two identical DOM nodes separated by text, the text will go missing on the next render. You can get around it by wrapping your text nodes in <span>s.

MaxGiting commented 4 years ago

Yes @mpbarlow the exact same issue. Thank you for linking and the "fix". You mention in your issue this https://github.com/livewire/livewire/blob/1.x/js/dom/morphdom/morphdom.js#L317

Has the file changed since you linked to it? Which line in particular did you think should be investigated?

mpbarlow commented 4 years ago

@MaxGiting I don't believe it's changed since I linked to it. I didn't look too far into it, but based on the description in the comment block it sounded likely that that was the cause of the bug.

MaxGiting commented 4 years ago

1473 closes this issue