Non native Form Select component has weird border on select / focus

[e-m-s-y]

Package

Form builder

Package Version

v3.2.130

How can we help you?

Hi,

I've been wondering how one can disable the blue / white border on non native Select component. It's very weird, might be a bug.

public function form(Form $form): Form
    {
        return $form
            ->schema([
                Select::make('test1')
                    ->label('test1 (native)')
                    ->options([
                        'draft' => 'Draft',
                        'reviewing' => 'Reviewing',
                        'published' => 'Published',
                    ]),
                Select::make('test2')
                    ->label('test2 (native false)')
                    ->options([
                        'draft' => 'Draft',
                        'reviewing' => 'Reviewing',
                        'published' => 'Published',
                    ])->native(false),
            ]);
}

If I click on the non native select after a fresh page load it shows the border, however if I refresh and click the native select first the border wont show. I've attached a GIF to demonstrate.

I'd like to hide / disable the blue / white border at all, anyone know how?

[leandrocfe]

Any css customizations?

[e-m-s-y]

Unfortunately that didn't help. Output of command:

  ⇂ public/js/filament/forms/components/color-picker.js
  ⇂ public/js/filament/forms/components/date-time-picker.js
  ⇂ public/js/filament/forms/components/file-upload.js
  ⇂ public/js/filament/forms/components/key-value.js
  ⇂ public/js/filament/forms/components/markdown-editor.js
  ⇂ public/js/filament/forms/components/rich-editor.js
  ⇂ public/js/filament/forms/components/select.js
  ⇂ public/js/filament/forms/components/tags-input.js
  ⇂ public/js/filament/forms/components/textarea.js
  ⇂ public/js/filament/widgets/components/chart.js
  ⇂ public/js/filament/widgets/components/stats-overview/stat/chart.js
  ⇂ public/js/filament/filament/app.js
  ⇂ public/js/filament/filament/echo.js
  ⇂ public/js/filament/notifications/notifications.js
  ⇂ public/js/filament/support/async-alpine.js
  ⇂ public/js/filament/support/support.js
  ⇂ public/js/filament/tables/tables.js
  ⇂ public/css/filament/forms/forms.css
  ⇂ public/css/filament/support/support.css
  ⇂ public/css/filament/filament/app.css

[leandrocfe]

This is working on my end. Could you create a minimal repo on Github to reproduce this issue?

[e-m-s-y]

Thanks for helping, appreciate it.

Would you mind sharing the browser you tried it on? I'm starting to think that it might be browser related. I'm using Firefox (133.0.3). Seems to work properly on Safari.

[e-m-s-y]

I downgraded Filament using Composer and then upgraded it to latest version. There are a few post installation commands that seemed to fixed the issue.

[saifali-ch]

.choices:focus {
    outline: none;
}

OR

.choices {
    @apply focus:outline-none;
}