Splade Component Hides on Rehydrate, Even After Removing from DOM

[syedahnb]

• Laravel Version: ^v10.10.0
• PHP Version: PHP 8.1.2 (cli)
• Splade JS Version (npm): 8.1.0
• Splade PHP Version (composer): #.#.#
• Dev environment (OS, Sail/Valet/etc): ...Laragon

You may use the built-in Artisan Command to show the installed versions of the packages:

php artisan splade:show-versions
Composer (PHP) package version: 1.4.15.1
NPM (JS) package version: 1.4.15

Make sure both Splade packages (JS + PHP) are up-to-date and on the same version. For example, when using version 0.5.0 of the PHP package, you should use the same JavaScript package version.

Description:

Steps To Reproduce Issue:

                        <x-splade-rehydrate on="category-added">
                            <ul>
                                @foreach($categories as $category)
                                    <li>{{ $category->name }}</li>
                                @endforeach
                            </ul>
                        </x-splade-rehydrate>

                     <x-splade-rehydrate on="category-added">
                             <x-splade-select
                                name="category_id"
                                placeholder="Select Category"
                                :options="$categories"
                                option-label="category_serial_name"
                                option-value="id"
                                choices
                             />
                        </x-splade-rehydrate>```
If I use the Splade component in rehydrate, it hides even when the HTML DOM is removed from the HTML structure. If I use native HTML structure, the rehydrate is successful.

[ejoi8]

try wrap <x-splade-form> around the <x-splade-select>

<x-splade-form confirm method="post" :action="route('user.store')" stay @success="$splade.emit('team-member-added')">
    <x-splade-rehydrate on="team-member-added">
    <!-- wrap another form here -->
        <x-splade-form>
            <x-splade-select id="category-added" remote-url="`/api/fetch-categories`" name="category_id" placeholder="Select Category" option-label="category_serial_name" option-value="id" choices/>
        </x-splade-form>
    </x-splade-rehydrate>
</x-splade-form>

[syedahnb]

But I am facing one issue right now: I am unable to get the category_id for the next dependent dropdown.

<x-splade-form
          :action="route('admin.items.store')"
          class="space-y-5">
             <div class="mt-6 grid grid-cols-6 gap-6">

              <div class="col-span-6 sm:col-span-6">
                  <x-label-create-list
                      label="Category"
                  >
                      @can('category_create')
                          <x-action-create
                              modal

                              href="{{route('admin.categories.create')}}"
                          />
                      @endcan
                      @can('category_access')
                          <x-action-list
                              href="{{route('admin.categories.index')}}"
                          />
                      @endcan
                  </x-label-create-list>

                      <x-splade-rehydrate on="category-added" >
                          <x-splade-form>
                          <x-splade-select
                              id="category-added"
                              remote-url="`/api/fetch-categories`"
                              name="category_id"
                              placeholder="Select Category"
                              option-label="category_serial_name"
                              option-value="id"
                              choices
                          />
                          </x-splade-form>
                      </x-splade-rehydrate>

              </div>
              <div class="col-span-6 sm:col-span-3">
                  <x-label-create-list
                      label="Item Name"
                  >
                      @can('serial_create')
                          <x-action-create
                              href="#create-serial"
                          />
                      @endcan
                      @can('serial_access')
                          <x-action-list href="{{route('admin.serials.index')}}"/>
                      @endcan
                  </x-label-create-list>

                  <x-splade-select
                      remote-url="`/api/items-code/${form.category_id}`"
                      name="item_id"
                      placeholder="Select Item"
                      option-label="name"
                      option-value="id"
                      choices
                      reset-on-new-remote-url
                  />
              </div>
          </div>
  </x-splade-form>