An attempt at selective error highlighting

Author: V13Axel

resources/js/calendar/collapsible_component.js

@@ -1,3 +1,5 @@
+import _ from "lodash";
+
 export default class CollapsibleComponent {
     initialized = false;
     processWatchers = false;
@@ -109,6 +111,8 @@ export default class CollapsibleComponent {
     }
 
     hasError(path) {
+        console.log(path, _.get(this.errors, path));
 
+        return _.get(this.errors, path).length > 0;
     }
 }

resources/views/components/alpine/text-input.blade.php

@@ -8,7 +8,11 @@
         data-pt-position="{{ $attributes->get('tooltip-position') ?? 'top' }}"
     @endif
 
-    {{ $attributes->filter(fn (string $value, string $key) => !in_array($key, ['model', 'tooltip', 'tooltip-position']))->merge(['class' => 'protip disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-red-600 dark:text-gray-300 text-gray-600 focus:ring-red-500 focus:border-red-500 block w-full px-2 shadow-sm border-red-300 rounded-md']) }}>
+    {{ $attributes->filter(fn (string $value, string $key) => !in_array($key, ['model', 'tooltip', 'tooltip-position']))->merge(['class' => 'protip disabled:text-gray-500 disabled:bg-gray-300 dark:bg-gray-700 dark:border-red-600 dark:text-gray-300 text-gray-600 block w-full px-2 shadow-sm rounded-md']) }}
+    :class="{
+    'dark:border-red-600 focus:ring-red-500 focus:border-red-500 border-red-300': hasError({{ $attributes->get('path') }})
+    }"
+    >
 
 <small class="text-red-600" x-show="hasError({{ $attributes->get('path') }})"
        x-text="getError({{ $attributes->get('path') }})"></small>