title: How to fix a strange behaviour with laravel livewire and pagination?
body: <p>I started with Laravel 8 and livewire a few days ago. I still have a lot to discover but I am on my way.</p>
  <p>Lastly, I encountered a behaviour I have trouble understanding.</p>
  <h2>My goal</h2>
  <p>I want to create a page to CRUD posts. What I want is to have a post list that is paginated displayed at the bottom of the page, a button to create a new post and the possibility to click a button on each post line to edit the post.
  I also want the editor of the post displayed at the top of the page while the list is hidden (but this last possibility is not absolutely necessary).</p>
  <p>I could manage to have this working as long as the post list is not paginated but not with pagination.</p>
  <p>To do this I use a liveewire component whose code is herebelow:</p>
  <h3>Component's code in app/Http/livewire/posts/Posts.php</h3>
  <pre><code>&lt;?php
  namespace App\Http\Livewire\Posts;
  use App\Models\Post;
  use Livewire\Component;
  class Posts extends Component
  {
      public $posts;
      public $links;
      public $post_id,$title, $abstract, $body,$category,$diaporama_dir,
             $beg_date,$end_date,$close_date,$receive_registration,
             $sticky,$user_id,$inscription_directive;   
      /**
       * The attributes that are mass assignable.
       *
       * @var array
       */
      public  function render()
      {   
          $this-&gt;mode='list';
          $this-&gt;posts=Post::select('id','title')-&gt;orderBy('created_at','DESC')-&gt;paginate(15)-&gt;toArray();
          $this-&gt;links=$this-&gt;posts['links'];
          //dd($this-&gt;links);
          $this-&gt;user_id=auth()-&gt;user()-&gt;id;
          return view('livewire.posts.posts');
      }
      public function donothing(){
  
      }
      /*
       * The attributes that are mass assignable.
       *
       * @var array
       */
      public function resetInputFields(){
          $this-&gt;title = '';
          $this-&gt;body = '';
          $this-&gt;title='';
          $this-&gt;abstract='';
          $this-&gt;body='';
          $this-&gt;category='';
          $this-&gt;diaporama_dir='';  
          $this-&gt;beg_date='';
          $this-&gt;end_date='';
          $this-&gt;close_date='';
          $this-&gt;receive_registration='';
          $this-&gt;sticky='';
          
          $this-&gt;inscription_directive='';
      }
      /**
       * The attributes that are mass assignable.
       *
       * @var array
       */
      public function store()
      {
          
          $validatedData = $this-&gt;validate([
              'title' =&gt; 'required',
              'body' =&gt; 'required',
              'abstract'=&gt;'required',
              'category'=&gt;'',
              'diaporama_dir'=&gt;'',
              'beg_date'=&gt;'sometimes',
              'end_date'=&gt;'sometimes',
              'close_date'=&gt;'sometimes',
              'receive_registration'=&gt;'',
              'sticky'=&gt;'',
              'user_id'=&gt;'required',
              'inscription_directive'=&gt;''
          ]);
          Post::create($validatedData);
          session()-&gt;flash('message', 'Bravo ! Votre article a été enregistré.');
         // $this-&gt;resetInputFields(); //user may want to keep the input stable
      }
      /**
       * The attributes that are mass assignable.
       *
       * @var array
       */
      public function edit($id)
      {
          $post = Post::findOrFail($id);
          $this-&gt;post_id = $id;
          $this-&gt;title = $post-&gt;title;
          $this-&gt;abstract=$post-&gt;abstract;
          $this-&gt;body=$post-&gt;body;
          $this-&gt;category=$post-&gt;category;
          $this-&gt;diaporama_dir=$post-&gt;diaporama_dir;  
          $this-&gt;beg_date=$post-&gt;beg_date;
          $this-&gt;end_date=$post-&gt;end_date;
          $this-&gt;close_date=$post-&gt;close_date;
          $this-&gt;receive_registration=$post-&gt;receive_registration;
          $this-&gt;sticky=$post-&gt;sticky;
          $this-&gt;inscription_directive=$post-&gt;inscription_directive;
  
          $this-&gt;dispatchBrowserEvent('notify','je passe en mode edit');//to switch browser page to edit mode
      }
  
  
          /**
       * The attributes that are mass assignable.
       *
       * @var array
       */
      public function update()
      {
          $validatedData = $this-&gt;validate([
              'title' =&gt; 'required',
              'body' =&gt; 'required',
              'abstract'=&gt;'required',
              'category'=&gt;'',
              'diaporama_dir'=&gt;'',
              'beg_date'=&gt;'sometimes',
              'end_date'=&gt;'sometimes',
              'close_date'=&gt;'sometimes',
              'receive_registration'=&gt;'',
              'sticky'=&gt;'',
              'user_id'=&gt;'required',
              'inscription_directive'=&gt;''
          ]);
  
          $post = Post::find($this-&gt;post_id);
          $post-&gt;update([
              'title' =&gt; $this-&gt;title,
              'body'=&gt; $this-&gt;body,
              'abstract'=&gt; $this-&gt;abstract,
              'category'=&gt; $this-&gt;category,
              'diaporama_dir'=&gt;$this-&gt;diaporama_dir,
              'beg_date'=&gt;$this-&gt;beg_date,
              'end_date'=&gt;$this-&gt;end_date,
              'close_date'=&gt;$this-&gt;close_date,
              'receive_registration'=&gt;$this-&gt;receive_registration,
              'sticky'=&gt;$this-&gt;sticky,
              'user_id'=&gt;$this-&gt;user_id,
              'inscription_directive'=&gt;$this-&gt;inscription_directive
          ]);
        
          session()-&gt;flash('message', &quot;Bravo ! L'article a été mis à jour.&quot;);
  
         // $this-&gt;resetInputFields();//user may like to keep the input fields stable
  
      }
  }
  </code></pre>
  <p>and views are these:</p>
  <h3>View 1 : the main page in resources/views/livewire/posts/posts.blade.php</h3>
  <pre><code>&lt;div class=&quot;container m-auto  w-10/12&quot;&gt;
  &lt;div x-data=&quot;{ mode: 'list' }&quot;&gt;
      @if (session()-&gt;has('message'))
          &lt;div class=&quot;bg-green-200 p-4 w-full my-8 text-xl text-orange-500&quot;&gt;
              {{ session('message') }}
          &lt;/div&gt;
      @endif
      &lt;div x-on:notify.window=&quot;mode = 'update'&quot;&gt;
          &lt;div x-show=&quot;mode==='update'&quot;&gt;
              @include('livewire.posts.update')
          &lt;/div&gt;
  
          &lt;div x-show=&quot;mode === 'edit'&quot;&gt;
              @include('livewire.posts.create')
          &lt;/div&gt;
      &lt;/div&gt;
  
     {{-- &lt;div x-show=&quot;mode === 'list'&quot; class=&quot;&quot;&gt;--}} 
         &lt;div&gt;
          &lt;div&gt;
              &lt;button x-on:click=&quot;mode = 'edit'&quot; class=&quot;bg-red-400 px-2 py-1 border rounded-lg mt-2&quot;&gt;Nouvel
                  article&lt;/button&gt;
  
          &lt;/div&gt;
          &lt;table class=&quot; bg-green-400 w-full table table-bordered mt-5 &quot;&gt;
              &lt;thead&gt;
                  &lt;tr class=&quot;bg-red-50 mb-2&quot;&gt;
                      &lt;th&gt;Id.&lt;/th&gt;
                      &lt;th&gt;Titre&lt;/th&gt;
                      &lt;th width=&quot;150px&quot;&gt;Action&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
  
                  @for ($i = 0; $i &lt; $posts['per_page']; $i++)
                      &lt;tr class=&quot;bg-red-400 mb-2 p-2 space-y-2 border-8 border-red-50 &quot;&gt;
                          &lt;td&gt;{{ $posts['data'][$i]['id'] }}&lt;/td&gt;
                          &lt;td&gt;{{ $posts['data'][$i]['title'] }}&lt;/td&gt;
                          &lt;td&gt;{{--les actions--}}
                              &lt;button wire:click=&quot;edit({{ $posts['data'][$i]['id'] }})&quot;
                                  class=&quot;btn btn-primary btn-sm&quot;&gt;Edit&lt;/button&gt;
                              {{-- &lt;button wire:click=&quot;delete({{ $post-&gt;id }})&quot;
                                  class=&quot;btn btn-danger btn-sm&quot;&gt;Delete&lt;/button&gt;--}}
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  @endfor
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;div class=&quot;flex flex-row mt-2&quot;&gt;
              @for ($i = 0; $i &lt; count($links); $i++)
                  &lt;div class=&quot;flex p-2 mr-2 border w-max-content&quot;&gt;
                       &lt;a href=&quot;{{$links[$i]['url'] }}&quot;&gt;{{$links[$i]['label']}}&lt;/a&gt;
  
                  &lt;/div&gt;
              @endfor
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h3>2- create include in resources/views/livewire/posts/create.blade.php</h3>
  <pre><code>&lt;div class=&quot;container bg-green-500 p-4&quot;&gt;
      &lt;form&gt;
          This is the create form
          &lt;input type=&quot;hidden&quot; name=&quot;user_id&quot; wire:model=&quot;user_id&quot; &gt;
          &lt;div class=&quot;flex flex-col md:flex-row&quot; &gt;
          &lt;div class=&quot; mt-2 flex flex-col w-max-content&quot;&gt;
              &lt;label for=&quot;category&quot;&gt;Catégorie:&lt;/label&gt;
              &lt;select class=&quot;&quot; name=&quot;category&quot; id=&quot;category&quot; wire:model=&quot;category&quot;&gt;
                  &lt;option value=&quot;Sans&quot;&gt;Sans&lt;/option&gt;
                  &lt;option value=&quot;Annoncement&quot;&gt;Annonce d'un événement&lt;/option&gt;
              &lt;/select&gt;
              @error('category') &lt;span class=&quot;text-danger&quot;&gt;{{ $message }}&lt;/span&gt;@enderror
          &lt;/div&gt;
          &lt;div class=&quot; mt-2 flex flex-col flex-auto ml-4&quot;&gt;
              &lt;label for=&quot;title&quot;&gt;Title:&lt;/label&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;title&quot; id=&quot;title&quot; placeholder=&quot;Saisissez un titre&quot;
                  wire:model=&quot;title&quot; value=&quot;&quot;&gt;
              @error('title') &lt;span class=&quot;text-danger&quot;&gt;{{ $message }}&lt;/span&gt;@enderror
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class=&quot;flex flex-col md:flex-row&quot; &gt;
          &lt;div class=&quot; mt-2 flex flex-col w-max-cbeg_date &quot;&gt;
              &lt;label for=&quot;beg_date&quot;&gt;Date de début&lt;/label&gt;
              &lt;input type=&quot;text&quot; class=&quot;&quot; name=&quot;beg_date&quot; id=&quot;beg_date&quot; wire:model=&quot;beg_date&quot;&gt;          
              @error('beg_date') &lt;span class=&quot;text-danger&quot;&gt;{{ $message }}&lt;/span&gt;@enderror
          &lt;/div&gt;
          &lt;div class=&quot; mt-2 flex flex-col w-max-cbeg_date ml-4&quot;&gt;
              &lt;label for=&quot;end_date&quot;&gt;Datend_date&lt;/label&gt;
              &lt;input type=&quot;text&quot; class=&quot;&quot; name=&quot;end_date&quot; id=&quot;end_date&quot; wire:model=&quot;end_date&quot;&gt;
              @error('end_date') &lt;span class=&quot;text-danger&quot;&gt;{{ $message }}&lt;/span&gt;@enderror
          &lt;/div&gt;
          &lt;div class=&quot; mt-2 flex flex-col w-max-cbeg_date ml-4&quot;&gt;
              &lt;label for=&quot;close_dclose&quot;&gt;Date limite&lt;/label&gt;
              &lt;input type=&quot;text&quot; class=&quot;&quot; name=&quot;close_date&quot; id=&quot;close_date&quot; wire:model=&quot;close_date&quot;&gt;
              @error('close_date') &lt;span class=&quot;text-danger&quot;&gt;{{ $message }}&lt;/span&gt;@enderror
          &lt;/div&gt; 
          &lt;div class=&quot; mt-2 flex flex-col w-max-content ml-4&quot;&gt;
              &lt;label for=&quot;receive_registration&quot;&gt;Accepte les inscriptions:&lt;/label&gt;
              &lt;select class=&quot;&quot; name=&quot;receive_registration&quot; id=&quot;receive_registration&quot; wire:model=&quot;receive_registration&quot;&gt;
                  &lt;option value=&quot;no&quot;&gt;Non&lt;/option&gt;
                  &lt;option value=&quot;yes&quot;&gt;Oui&lt;/option&gt;
              &lt;/select&gt;
              @error('receive_registration') &lt;span class=&quot;text-danger&quot;&gt;{{ $message }}&lt;/span&gt;@enderror
          &lt;/div&gt;
          &lt;div class=&quot; mt-2 flex flex-col flex-auto ml-4&quot;&gt;
              &lt;label for=&quot;title&quot;&gt;Dossier du diaporama&lt;/label&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;diaporama_dir&quot; id=&quot;diaporama_dir&quot; placeholder=&quot;ex: admin/1&quot;
                  wire:model=&quot;diaporama_dir&quot;&gt;
              @error('diaporama_dir') &lt;span class=&quot;text-danger&quot;&gt;{{ $message }}&lt;/span&gt;@enderror
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;mt-2 flex flex-col&quot;&gt;
          &lt;label for=&quot;abstract&quot;&gt;Résumé&lt;/label&gt;
          &lt;textarea  class=&quot;form-control&quot; name=&quot;abstract&quot; id=&quot;abstract&quot; wire:model=&quot;abstract&quot;
              placeholder=&quot;Saisissez votre article&quot;&gt;&lt;/textarea&gt;
          @error('abstract') &lt;span class=&quot;text-danger&quot;&gt;{{ $message }}&lt;/span&gt;@enderror
      &lt;/div&gt;
  
      &lt;div class=&quot;mt-2 flex flex-col&quot;&gt;
          &lt;label for=&quot;body&quot;&gt;Corps de l'article&lt;/label&gt;
          &lt;textarea  class=&quot;form-control&quot; name=&quot;body&quot; id=&quot;body&quot; wire:model=&quot;body&quot; rows=30
              placeholder=&quot;Saisissez votre article&quot;&gt;&lt;/textarea&gt;
          @error('body') &lt;span class=&quot;text-danger&quot;&gt;{{ $message }}&lt;/span&gt;@enderror
      &lt;/div&gt;
      &lt;button wire:click.prevent=&quot;store()&quot; class=&quot;bg-red-400 px-2 py-1 border rounded-lg mt-2&quot;&gt;Enregistrer&lt;/button&gt;
      &lt;button wire:click.prevent=&quot;resetInputFields()&quot; class=&quot;bg-red-400 px-2 py-1 border rounded-lg mt-2&quot;&gt;Effacer tout&lt;/button&gt;
      &lt;button @click.prevent=&quot;mode = 'list'&quot; class=&quot;bg-red-400 px-2 py-1 border rounded-lg mt-2 ml-16&quot;&gt;Retour à la liste&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <h3>update include</h3>
  <p>The update include is exactly the same as the create include except an additional hidden field for the post id.</p>
  <h2>What is happening?</h2>
  <p>At startup, I mean when I visit the <em>localhost:8000/posts</em> page, the page 1 is correctly displayed and the links at the bottom of the page are like <em>localhost:8000/posts?page=3</em> whichever the number of the page may be.</p>
  <p>From this page I can normally go to another page using the bottom links, and this several times.</p>
  <p>The troube arises when I click a link to edit a post. The post is correctly sent back by the server but instantly we are <strong>switched to page 1</strong> of the paginated posts and the bottom links take <strong>a strange form</strong> such as <em><strong>localhost:8000/livewire/message/posts.posts?page=3</strong></em>  wichever the page number may be.</p>
  <p>The trouble arises also when, after having displayed the create form, I type a first char in the fields. In fact it seems that it arises each time a sync is required.</p>
  <p>How can I fix this?</p>