Select with search not working - stuck as if it's not using js

neo-arch commented 2 years ago

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior: Within a modal created a field with <x-select

Expected behavior For the dropdown to be collapsed.

Screenshots

Desktop (please complete the following information):

OS: MacOS
Browser Chrome, Firefox
Version [e.g. 22]

Additional context Blade

       <div>
                    <x-select label="Select Template" placeholder="Select one template" wire:model.defer="editing.template">
                        @foreach (App\Models\Page::TEMPLATES as $value => $label)
                            <x-select.option label="{{ $label }}" value="{{ $value }}" />
                        @endforeach
                    </x-select>
       </div>

Layout

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        @wireUiStyles
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        @livewireStyles

        <!-- Scripts -->
        @wireUiScripts
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>

Tailwind Config

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    mode: 'jit',
    presets: [
        require('./vendor/ph7jack/wireui/tailwind.config.js')
    ],
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './vendor/ph7jack/wireui/resources/**/*.blade.php',
        './vendor/ph7jack/wireui/ts/**/*.ts',
        './vendor/ph7jack/wireui/src/View/**/*.php'
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

neo-arch commented 2 years ago

Seems to be happening only when I add wire:model and hook it up to the component. When it's left on the sample wire:model or one that doesn't exist it works.

PH7-Jack commented 2 years ago

@neo-arch Hello, can you give more details about this issue?

neo-arch commented 2 years ago

The drop down is stuck in open position, I will try to take gif in a bit once I get back on.

neo-arch commented 2 years ago

https://share.getcloudapp.com/nOuvoEbe

PH7-Jack commented 2 years ago

Has an error in the console?

neo-arch commented 2 years ago

Livewire Entangle Error: Livewire property 'model' cannot be found

PH7-Jack commented 2 years ago

are you sure about your livewire component has this property? if is a model, you need to add it on rules

neo-arch commented 2 years ago

Yes, I am just replacing my existing frontend modal with WireUI's.

My property is editing.template, when I use this wire:model here is the error in the console.

neo-arch commented 2 years ago

    public function rules()
    {
        return [
            'editing.title' => ['required', 'min:3', 'max:165'],
            'editing.slug' => [Rule::unique('pages', 'slug')->ignore($this->editing)],
            'editing.description' => 'required',
            'editing.template' => 'required|in:'.collect(Page::TEMPLATES)->keys()->implode(','),
        ];
    }

neo-arch commented 2 years ago

https://share.getcloudapp.com/bLuqA89o

neo-arch commented 2 years ago

If I put "model" in wire:model="" or any other fake property that doesn't exist, it loops through the options and I see the expected behavior for the select dropwon, but when it's actually "Wired" to the real property it fails.

neo-arch commented 2 years ago

Here is an example of it working when it's not wired to a real property. It wont save the change for real, but it is a good demonstration. https://share.getcloudapp.com/xQu6belJ

PH7-Jack commented 2 years ago

what's your alpine and livewire version?

neo-arch commented 2 years ago

"livewire/livewire": "^2.5" "alpinejs": "^3.2.4",

neo-arch commented 2 years ago

Just defaults from Jetstream on a new project.

PH7-Jack commented 2 years ago

It is so strange, can reproduce this error in a public repository?

neo-arch commented 2 years ago

I will do this today

PH7-Jack commented 2 years ago

The new version is now released. Can you try using the latest version? If the problem persists, reopen the issue

wireui / wireui

Select with search not working - stuck as if it's not using js #69