[Bug]: Select Field UI And Fields Not Showing

abbasmashaddy72 commented 7 months ago

What happened?

I am unable to see the Select Fields:

How to reproduce the bug

Added Collection & Integrated with Select Fields, But Not Working as Excepted

My Tailwind Config:

content: [
        "./app/Colors/**/*.php",
        "./app/Helpers/Utilities.php",
        "./resources/**/*.blade.php",
        "./vendor/lara-zeus/core/resources/views/**/*.blade.php",
        "./vendor/lara-zeus/bolt/resources/views/themes/**/*.blade.php",
        "./vendor/lara-zeus/bolt/resources/views/filament/**/*.blade.php",
        "./vendor/filament/**/*.blade.php",
        "./node_modules/flowbite/**/*.js",
    ],

Package Version

3.0

PHP Version

8.2.0

Laravel Version

10.0

Which operating systems does with happen with?

No response

Notes

No response

atmonshi commented 7 months ago

do you have @filamentStyles and @filamentScripts in your app layout?

abbasmashaddy72 commented 7 months ago

I have Added it but Still Dropdowns are not loading when I check in Debug The Values are being Shown but in UI it is not Displaying

The Below is my Layout File: With Custom CSS & JS if You Need you can Take a Brief look at my Repo

@props([
    'meta' => [],
])

@php
    $title = $meta->title ? $meta->title . ' | ' . config('app.name') : config('app.name');
    $description = $meta->description ? $meta->description : config('app.description');
    $robots = $meta->robots ? 'index,follow' : 'noindex,nofollow';
    $ogImage = $meta->ogImage ? $meta->ogImage : null;

    $fontConfig = config('main.font');
    if (!empty($fontConfig) && !empty($fontConfig['url']) && !empty($fontConfig['family'])) {
        $fontsUrl = $fontConfig['url'];
        $fontFamily = $fontConfig['family'];
    }
@endphp

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full light scroll-smooth"
    dir="{{ LaravelLocalization::getCurrentLocaleDirection() }}">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">

    <title>{{ $title }}</title>
    <meta name="description" content="{{ $description }}" />
    <meta name="robots" content="{{ $robots }}" />

    <link rel="canonical" href="{{ trailing_slash_it(url()->current()) }}">

    <!-- Open Graph -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="{{ config('brand.social_media.twitter') }}" />
    <meta name="twitter:creator" content="{{ config('brand.social_media.twitter') }}" />

    <meta property="og:url" content="{{ trailing_slash_it(url()->current()) }}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="{{ $title }}" />
    <meta property="og:description" content="{{ $description }}" />
    <meta property="og:locale" content="{{ app()->getLocale() }}" />
    <meta property="og:site_name" content="{{ config('app.name') }}" />

    @if ($ogImage)
        <meta property="og:image" content="{{ $ogImage->url }}" />
        <meta property="og:image:alt" content="{{ $ogImage->alt }}" />
        <meta property="og:image:width" content="{{ $ogImage->width }}" />
        <meta property="og:image:height" content="{{ $ogImage->height }}" />
    @endif

    @yield('meta')

    @if (!empty($fontsUrl))
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="{{ $fontsUrl }}" rel="stylesheet" />

        <style>
            body {
                font-family: '{{ $fontFamily }}', 'sans-serif';
            }
        </style>
    @endif

    <style>
        :root {
            @foreach ($cssVariables ?? [] as $cssVariableName => $cssVariableValue)
                --{{ $cssVariableName }}: {{ $cssVariableValue }};
            @endforeach
        }
    </style>

    @stack('styles')
    @vite(['resources/css/app.scss', 'resources/js/app.js'])
    @filamentStyles
</head>

<body class="text-base text-slate-950 dark:text-white dark:bg-slate-900">
    <x-skip-link />

    <x-headers.default :siteSettings="$siteSettings" :menu='$menu' />

    @yield('hero')

    {{ $slot }}

    <x-footers.default :siteSettings="$siteSettings" :menu='$menu' />
    <x-switch />
    @filamentScripts

    @stack('scripts')
</body>

</html>

atmonshi commented 7 months ago

any console erros? do you have LW assets? try add this in this order

@livewireStyles
@filamentStyles
@stack('styles')
@vite(['resources/css/app.scss', 'resources/js/app.js'])
....

@livewireScripts
@filamentScripts
@livewire('notifications')
@stack('scripts')

abbasmashaddy72 commented 7 months ago

Still same no Console Errors:

Also, the Layout file is my Frontend file where I am having this issue while embedding the form

The Form is Working fine in bolt page, I think I am missing something

Can You Please Check my CSS, JS & Layout if it is Okay

atmonshi commented 7 months ago

ok I noticed you're adding alpinejs unless you have custom alpinejs component, then you don't need it try removing all custom JS and see if thats fix it. and then add one by one to see who causing the issues

abbasmashaddy72 commented 7 months ago

I have removed all the unnecessary code from my tailwind config file, app.scss & app.js

My Container and Section had relation Position, That too has been removed

I did not add x-cloak before that too added

I had my app.scss, app.js & layout to as be as close as bolt core app layout file but still unable to find the fix

I also tried to fix it by adding z-index to get a temporary fix but that too was not possible below is the video what is happening now after the Changes It is just scrollable with in the input box

Peek 2024-02-12 23-52

atmonshi commented 7 months ago

ok, I'll try to clone your repo tomorrow and see if I can find the issue and fix it

abbasmashaddy72 commented 7 months ago

Thanks, Brother, I will add my DB within Repo So That It will be easy for you to get started

atmonshi commented 7 months ago

so all I did is:

clone
set env file and set db connection
composer install
npm i && npm run dev
got an error (I am using mac m1)

Error: Cannot find module @rollup/rollup-darwin-arm64. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.

deleted node_modules and package-lock.json
run npm i && npm run dev again
login and create new form

I didnt have to check for the blade files its just worked

try delete the folder node_modules and package-lock.json

abbasmashaddy72 commented 7 months ago

Still same no Console Errors:

Also, the Layout file is my Frontend file where I am having this issue while embedding the form

The Form is Working fine in bolt page, I think I am missing something

Can You Please Check my CSS, JS & Layout if it is Okay

Brother it is working in blot layout, it is not working in my custom layout where I integrated the form If you use the DB then embed form will be available in home page. Which is not working.

It was mentioned in the above message

atmonshi commented 7 months ago

how I can accsess your custom layout? on a route? or I have to change any config?

atmonshi commented 7 months ago

if you removed @import "/node_modules/tobii/dist/css/tobii.css"; it will work

abbasmashaddy72 commented 7 months ago

if you removed @import "/node_modules/tobii/dist/css/tobii.css"; it will work

Thanks it worked, but I am using tobii is there any alternative which I can use which can work with filament seamlessly

atmonshi commented 7 months ago

I am not sure, since I never used tobii before

lara-zeus / bolt