From d7ad450ca17a814f63adb631016a034a3a4f4552 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 22 Oct 2024 17:19:48 +0300
Subject: [PATCH] RED-7340 - red border around the page input field should only
 appear after the user has finished entering the page range

---
 src/lib/inputs/details-radio/details-radio.component.html | 6 ++++--
 src/lib/inputs/details-radio/details-radio.component.ts   | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/inputs/details-radio/details-radio.component.html b/src/lib/inputs/details-radio/details-radio.component.html
index ef30e90..d0dbd64 100644
--- a/src/lib/inputs/details-radio/details-radio.component.html
+++ b/src/lib/inputs/details-radio/details-radio.component.html
@@ -43,15 +43,17 @@
                             }
 
                             @if (option.additionalInput) {
-                                <div class="iqser-input-group w-400 additional-input">
+                                <div class="iqser-input-group w-full additional-input">
                                     <span class="label"> {{ option.additionalInput.label | translate }} </span>
                                     <div class="flex-column">
                                         <input
                                             [(ngModel)]="option.additionalInput.value"
-                                            [ngClass]="{ error: hasError(option.additionalInput.errorCode) }"
+                                            [ngClass]="{ error: additionalInputTouched && hasError(option.additionalInput.errorCode) }"
                                             [placeholder]="
                                                 option.additionalInput.placeholder ? (option.additionalInput.placeholder | translate) : ''
                                             "
+                                            (blur)="additionalInputTouched = true"
+                                            (focus)="additionalInputTouched = false"
                                             (keydown)="emitExtraOption()"
                                         />
                                         @if (option.additionalInput.description) {
diff --git a/src/lib/inputs/details-radio/details-radio.component.ts b/src/lib/inputs/details-radio/details-radio.component.ts
index acd55b6..21caa54 100644
--- a/src/lib/inputs/details-radio/details-radio.component.ts
+++ b/src/lib/inputs/details-radio/details-radio.component.ts
@@ -43,6 +43,7 @@ export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOpt
     readonly options = input.required<DetailsRadioOption<I>[]>();
     readonly displayInRow = input(false, { transform: booleanAttribute });
     readonly extraOptionChanged = output<DetailsRadioOption<I>>();
+    additionalInputTouched = false;
 
     toggleOption(option: DetailsRadioOption<I>) {
         if (option.value !== this._value?.value && !option.disabled) {