fix field focus styles

This commit is contained in:
Dan Harrin
2021-04-12 01:05:47 +01:00
parent a11e9d1582
commit 92fef69d12
3 changed files with 6 additions and 4 deletions
@@ -335,6 +335,8 @@
})"
x-init="init()"
x-on:click.away="closePicker()"
x-on:keydown.escape.stop="closePicker()"
x-on:blur="closePicker()"
{!! $formComponent->getId() ? "id=\"{$formComponent->getId()}\"" : null !!}
class="relative"
{!! Filament\format_attributes($formComponent->getExtraAttributes()) !!}
@@ -359,12 +361,11 @@
x-on:keydown.backspace.stop.prevent="clearValue()"
x-on:keydown.clear.stop.prevent="clearValue()"
x-on:keydown.delete.stop.prevent="clearValue()"
x-on:keydown.escape.stop="closePicker()"
x-bind:aria-expanded="open"
aria-label="{{ __($formComponent->getPlaceholder()) }}"
@endunless
type="button"
class="bg-white relative w-full border rounded shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 {{ $formComponent->isDisabled() ? 'text-gray-500' : '' }} {{ $errors->has($formComponent->getName()) ? 'border-danger-600 motion-safe:animate-shake' : 'border-gray-300' }}"
class="bg-white relative w-full border rounded shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus-within:border-blue-300 focus-within:ring focus-within:ring-blue-200 focus-within:ring-opacity-50 {{ $formComponent->isDisabled() ? 'text-gray-500' : '' }} {{ $errors->has($formComponent->getName()) ? 'border-danger-600 motion-safe:animate-shake' : 'border-gray-300' }}"
>
<input
readonly
@@ -203,6 +203,7 @@
})"
x-init="init()"
x-on:click.away="closeListbox()"
x-on:blur="closeListbox()"
x-on:keydown.escape.stop="closeListbox()"
{!! $formComponent->getId() ? "id=\"{$formComponent->getId()}\"" : null !!}
class="relative"
@@ -87,7 +87,7 @@
/>
@endif
<div x-show="tags.length || {{ $formComponent->isDisabled() ? 'false' : 'true' }}" class="rounded shadow-sm border overflow-hidden {{ $errors->has($formComponent->getName()) ? 'border-danger-600 motion-safe:animate-shake' : 'border-gray-300' }}">
<div x-show="tags.length || {{ $formComponent->isDisabled() ? 'false' : 'true' }}" class="rounded shadow-sm border overflow-hidden focus-within:border-blue-300 focus-within:ring focus-within:ring-blue-200 focus-within:ring-opacity-50 {{ $errors->has($formComponent->getName()) ? 'border-danger-600 motion-safe:animate-shake' : 'border-gray-300' }}">
@unless ($formComponent->isDisabled())
<input
autocomplete="off"
@@ -96,7 +96,7 @@
type="text"
x-on:keydown.enter.stop.prevent="createTag()"
x-model="newTag"
class="block w-full placeholder-gray-400 focus:placeholder-gray-500 placeholder-opacity-100 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 border-0"
class="block w-full placeholder-gray-400 focus:placeholder-gray-500 placeholder-opacity-100 border-0"
x-bind:class="{ 'text-danger-700': hasError }"
/>
@endunless