Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Navigating to page and going back causes placeholder of flux:select multiple to be duplicated when using wire:navigate. #697

Open
SeraphixMD opened this issue Nov 18, 2024 · 11 comments
Open

Navigating to page and going back causes placeholder of flux:select multiple to be duplicated when using wire:navigate. #697

SeraphixMD opened this issue Nov 18, 2024 · 11 comments

Comments

@SeraphixMD
Copy link

SeraphixMD commented Nov 18, 2024 •
edited
Loading

When no placeholder text is present, a space is duplicated.

In another case, the x selected text is being duplicated, but I couldn't replicate this in a standalone example.

<flux:select variant="listbox" wire:model.live="filteredIngredients" multiple searchable>
    @foreach($ingredients as $ingredient)
        <flux:option value="{{ $ingredient->id }}">{{ $ingredient->name }}</flux:option>
    @endforeach
</flux:select>

Minimal example:

<?php

namespace App\Livewire;

use Illuminate\View\View;
use Livewire\Component;

class SelectTest extends Component
{
    public function render(): View
    {
        return view('livewire.select-test')
            ->layout('layouts.guest');
    }
}
<div>
    <flux:select variant="listbox" multiple placeholder="Choose industries...">
        <flux:option>Photography</flux:option>
        <flux:option>Design services</flux:option>
        <flux:option>Web development</flux:option>
        <flux:option>Accounting</flux:option>
        <flux:option>Legal services</flux:option>
        <flux:option>Consulting</flux:option>
        <flux:option>Other</flux:option>
    </flux:select>
    
    <flux:button href="{{ route('pages.home') }}" wire:navigate>
        Click me!
    </flux:button>
</div>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet"/>

    <!-- Styles / Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    @livewireStyles
    @fluxStyles
</head>
<body class="min-h-screen bg-white dark:bg-zinc-800">

<flux:main container>
    {{ $slot }}
</flux:main>

@livewireScripts
@fluxScripts
</body>
</html>
<x-guest-layout>
    My Super Duper Awesome Home Page!
</x-guest-layout>
Route::get('/', function () {
    return view('pages.home');
})->name('pages.home');

Route::get('/test', \App\Livewire\SelectTest::class)
     ->name('test');
@SeraphixMD
Copy link
Author

SeraphixMD commented Nov 18, 2024 •
edited
Loading

Another things I noticed, when selecting a couple things, navigating to a different page and then going back, the select still says x selected, but nothing in the list is actually selected. I'd guess this is because there's no binding, but then the select still shouldn't show x selected.

@jeffchown
Copy link

@SeraphixMD Can you show your app.js file as well?

@SeraphixMD
Copy link
Author

@jeffchown
app.js:

import './bootstrap';

bootstrap.js:

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

@jeffchown
Copy link

jeffchown commented Nov 19, 2024 •
edited
Loading

@SeraphixMD UPDATE: I tested your code and was able to recreate the issue where:

navigating to a different page and then going back, the select still says x selected

(and this did occur also when I wire:modeled the select to a property)

but I was not able to recreate the placeholder duplication.

@SeraphixMD
Copy link
Author

SeraphixMD commented Nov 19, 2024 •
edited
Loading

@jeffchown Yeah, it's clear that something is broken, but I'm also having difficulties reliably replicating the the other case I mentioned😒

I'll create a new project from scratch and see where I end up.

@SeraphixMD
Copy link
Author

@jeffchown https://github.com/SeraphixMD/select-test.git This reproduces the placeholder text being duplicated. Created a new blank project through Herd, added Flux as a dependency, followed installation guide, and added the minimal code necessary to reproduce 👍 How did you reproduce the x selected being duplicated? Could you maybe add it to that repo as a quick PR for Caleb?

@SeraphixMD
Copy link
Author

Well, I can replicate the x selected being duplicated issue, by selecting something, switching pages and going back and selected something, which then shows x selected for as many times as you do it, but in my main project the x selected is duplicating itself just like the placeholder is duplicating itself, without having to select new items in between...

@jeffchown
Copy link

@SeraphixMD I used your code from above to reproduce the x selected. Went to /test, selected a few options, clicked your Click me! button to go to pages.home, then click the browser's back button.

@SeraphixMD
Copy link
Author

SeraphixMD commented Nov 19, 2024 •
edited
Loading

Just to make sure we're not talking alongside each other, are you not seeing this behavior? This is on the new project I just shared:

Screen.Recording.2024-11-19.152500.mp4

@jeffchown
Copy link

Gotcha - with your added detail(s), I was able to recreate that issue as well (using your original code and the steps you mentioned)

Image

@SeraphixMD
Copy link
Author

Just for reference, I'm not able to reproduce the x selected being duplicated like this:

Screen.Recording.2024-11-19.153757.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jeffchown @SeraphixMD