Skip to content

Commit 51d232f

Browse files
andrasbacsaiandrasbacsai
authored
Merge pull request #6897 from coollabsio/andrasbacsai/service-textarea-focus
Fix: Domains input dirty state reset on blur
2 parents 988c08f + 2a8f02e commit 51d232f

File tree

11 files changed

+31
-22
lines changed

11 files changed

+31
-22
lines changed

‎app/Livewire/MonacoEditor.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ public function __construct(
2525
public bool $readonly,
2626
public bool $allowTab,
2727
public bool $spellcheck,
28+
public bool $autofocus = false,
2829
public ?string $helper,
2930
public bool $realtimeValidation,
3031
public bool $allowToPeak,

‎app/View/Components/Forms/Textarea.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ public function __construct(
2727
public bool $readonly = false,
2828
public bool $allowTab = false,
2929
public bool $spellcheck = false,
30+
public bool $autofocus = false,
3031
public ?string $helper = null,
3132
public bool $realtimeValidation = false,
3233
public bool $allowToPeak = true,

‎resources/css/utilities.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,20 +46,20 @@
4646

4747
/* input, select before */
4848
@utility input-select {
49-
@apply block py-1.5 w-full text-sm text-black rounded-sm border-0 ring-1 ring-inset dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300 disabled:bg-neutral-200 disabled:text-neutral-500 dark:disabled:bg-coolgray-100/40 dark:disabled:ring-transparent;
49+
@apply block py-1.5 w-full text-sm text-black rounded-sm border-0 ring-2 ring-inset dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300 disabled:bg-neutral-200 disabled:text-neutral-500 dark:disabled:bg-coolgray-100/40 dark:disabled:ring-transparent;
5050
}
5151

5252
/* Readonly */
5353
@utility input {
5454
@apply dark:read-only:text-neutral-500 dark:read-only:ring-0 dark:read-only:bg-coolgray-100/40 placeholder:text-neutral-300 dark:placeholder:text-neutral-700 read-only:text-neutral-500 read-only:bg-neutral-200;
5555
@apply input-select;
56-
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base;
56+
@apply focus-visible:outline-none focus-visible:border-l-4 focus-visible:border-l-coollabs dark:focus-visible:border-l-warning;
5757
}
5858

5959
@utility select {
6060
@apply w-full;
6161
@apply input-select;
62-
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base;
62+
@apply focus-visible:outline-none focus-visible:border-l-4 focus-visible:border-l-coollabs dark:focus-visible:border-l-warning;
6363
}
6464

6565
@utility button {

‎resources/views/components/forms/datalist.blade.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,12 +98,12 @@
9898

9999
{{-- Unified Input Container with Tags Inside --}}
100100
<div @click="$refs.searchInput.focus()"
101-
class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5 w-full text-sm rounded-sm border-0 ring-1 ring-inset ring-neutral-200 dark:ring-coolgray-300 bg-white dark:bg-coolgray-100 cursor-text px-1 focus-within:ring-2 focus-within:ring-coollabs dark:focus-within:ring-warning text-black dark:text-white"
101+
class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5 w-full text-sm rounded-sm border-0 ring-2 ring-inset ring-neutral-200 dark:ring-coolgray-300 bg-white dark:bg-coolgray-100 cursor-text px-1 focus-within:border-l-4 focus-within:border-l-coollabs dark:focus-within:border-l-warning text-black dark:text-white"
102102
:class="{
103103
'opacity-50': {{ $disabled ? 'true' : 'false' }}
104104
}"
105105
wire:loading.class="opacity-50"
106-
wire:dirty.class="dark:ring-warning ring-warning">
106+
wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4">
107107

108108
{{-- Selected Tags Inside Input --}}
109109
<template x-for="value in selected" :key="value">
@@ -229,12 +229,12 @@ class="w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 bg-white dark:
229229

230230
{{-- Input Container --}}
231231
<div @click="openDropdown()"
232-
class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 ring-1 ring-inset ring-neutral-200 dark:ring-coolgray-300 bg-white dark:bg-coolgray-100 cursor-text focus-within:ring-2 focus-within:ring-coollabs dark:focus-within:ring-warning text-black dark:text-white"
232+
class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 ring-2 ring-inset ring-neutral-200 dark:ring-coolgray-300 bg-white dark:bg-coolgray-100 cursor-text focus-within:border-l-4 focus-within:border-l-coollabs dark:focus-within:border-l-warning text-black dark:text-white"
233233
:class="{
234234
'opacity-50': {{ $disabled ? 'true' : 'false' }}
235235
}"
236236
wire:loading.class="opacity-50"
237-
wire:dirty.class="dark:ring-warning ring-warning">
237+
wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4">
238238

239239
{{-- Display Selected Value or Search Input --}}
240240
<div class="flex-1 flex items-center min-w-0 px-1">

‎resources/views/components/forms/input.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hov
2828
<input autocomplete="{{ $autocomplete }}" value="{{ $value }}"
2929
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
3030
@if ($id !== 'null') wire:model={{ $id }} @endif
31-
wire:dirty.class="dark:ring-warning ring-warning" wire:loading.attr="disabled"
31+
wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4" wire:loading.attr="disabled"
3232
type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
3333
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
3434
aria-placeholder="{{ $attributes->get('placeholder') }}"
@@ -39,7 +39,7 @@ class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hov
3939
<input autocomplete="{{ $autocomplete }}" @if ($value) value="{{ $value }}" @endif
4040
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required) @readonly($readonly)
4141
@if ($id !== 'null') wire:model={{ $id }} @endif
42-
wire:dirty.class="dark:ring-warning ring-warning" wire:loading.attr="disabled"
42+
wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4" wire:loading.attr="disabled"
4343
type="{{ $type }}" @disabled($disabled) min="{{ $attributes->get('min') }}"
4444
max="{{ $attributes->get('max') }}" minlength="{{ $attributes->get('minlength') }}"
4545
maxlength="{{ $attributes->get('maxlength') }}"

‎resources/views/components/forms/monaco-editor.blade.php‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,13 @@
8181
document.getElementById(monacoId).addEventListener('monaco-editor-focused', (event) => {
8282
editor.focus();
8383
});
84-
84+
8585
updatePlaceholder(editor.getValue());
86+
87+
@if ($autofocus)
88+
// Auto-focus the editor
89+
setTimeout(() => editor.focus(), 100);
90+
@endif
8691
8792
$watch('monacoContent', value => {
8893
if (editor.getValue() !== value) {
@@ -99,7 +104,7 @@
99104
}, 5);" :id="monacoId">
100105
</div>
101106
<div class="relative z-10 w-full h-full">
102-
<div x-ref="monacoEditorElement" class="w-full h-96 text-md {{ $readonly ? 'opacity-65' : '' }}"></div>
107+
<div x-ref="monacoEditorElement" class="w-full h-[calc(100vh-20rem)] min-h-96 text-md {{ $readonly ? 'opacity-65' : '' }}"></div>
103108
<div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()"
104109
:style="'font-size: ' + monacoFontSize"
105110
class="w-full text-sm font-mono absolute z-50 text-gray-500 ml-14 -translate-x-0.5 mt-0.5 left-0 top-0"

‎resources/views/components/forms/select.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class="flex gap-1 items-center mb-1 text-sm font-medium {{ $disabled ? 'text-neu
1111
</label>
1212
@endif
1313
<select {{ $attributes->merge(['class' => $defaultClass]) }} @disabled($disabled) @required($required)
14-
wire:dirty.class="dark:ring-warning ring-warning" wire:loading.attr="disabled" name={{ $id }}
14+
wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4" wire:loading.attr="disabled" name={{ $id }}
1515
@if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} @else wire:model={{ $id }} @endif>
1616
{{ $slot }}
1717
</select>

‎resources/views/components/forms/textarea.blade.php‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function handleKeydown(e) {
2727
@if ($useMonacoEditor)
2828
<x-forms.monaco-editor id="{{ $id }}" language="{{ $monacoEditorLanguage }}" name="{{ $name }}"
2929
name="{{ $id }}" model="{{ $value ?? $id }}" wire:model="{{ $value ?? $id }}"
30-
readonly="{{ $readonly }}" label="dockerfile" />
30+
readonly="{{ $readonly }}" label="dockerfile" autofocus="{{ $autofocus }}" />
3131
@else
3232
@if ($type === 'password')
3333
<div class="relative" x-data="{ type: 'password' }">
@@ -46,7 +46,7 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
4646
<input x-cloak x-show="type === 'password'" value="{{ $value }}"
4747
{{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)
4848
@if ($id !== 'null') wire:model={{ $id }} @endif
49-
wire:dirty.class="dark:ring-warning ring-warning" wire:loading.attr="disabled"
49+
wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4" wire:loading.attr="disabled"
5050
type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
5151
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
5252
aria-placeholder="{{ $attributes->get('placeholder') }}">
@@ -55,9 +55,10 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
5555
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
5656
@else
5757
wire:model={{ $value ?? $id }}
58-
wire:dirty.class="dark:ring-warning ring-warning" @endif
58+
wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4" @endif
5959
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
60-
name="{{ $name }}" name={{ $id }}></textarea>
60+
name="{{ $name }}" name={{ $id }}
61+
@if ($autofocus) x-ref="autofocusInput" @endif></textarea>
6162

6263
</div>
6364
@else
@@ -67,9 +68,10 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
6768
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
6869
@else
6970
wire:model={{ $value ?? $id }}
70-
wire:dirty.class="dark:ring-warning ring-warning" @endif
71+
wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4" @endif
7172
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
72-
name="{{ $name }}" name={{ $id }}></textarea>
73+
name="{{ $name }}" name={{ $id }}
74+
@if ($autofocus) x-ref="autofocusInput" @endif></textarea>
7375
@endif
7476
@endif
7577
@error($id)

‎resources/views/livewire/project/application/general.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,12 @@
9090
@if ($application->build_pack !== 'dockercompose')
9191
<div class="flex items-end gap-2">
9292
@if ($application->settings->is_container_label_readonly_enabled == false)
93-
<x-forms.input placeholder="https://coolify.io" wire:model.blur="application.fqdn"
93+
<x-forms.input placeholder="https://coolify.io" wire:model="application.fqdn"
9494
label="Domains" readonly
9595
helper="Readonly labels are disabled. You can set the domains in the labels section."
9696
x-bind:disabled="!canUpdate" />
9797
@else
98-
<x-forms.input placeholder="https://coolify.io" wire:model.blur="application.fqdn"
98+
<x-forms.input placeholder="https://coolify.io" wire:model="application.fqdn"
9999
label="Domains"
100100
helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io,https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. "
101101
x-bind:disabled="!canUpdate" />

‎resources/views/livewire/project/new/docker-compose.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<x-forms.button type="submit">Save</x-forms.button>
88
</div>
99
<x-forms.textarea useMonacoEditor monacoEditorLanguage="yaml" label="Docker Compose file" rows="20"
10-
id="dockerComposeRaw"
10+
id="dockerComposeRaw" autofocus
1111
placeholder='services:
1212
ghost:
1313
documentation: https://ghost.org/docs/config

0 commit comments

Comments
 (0)