fix(inline-edit): hide empty tooltip when validationTooltip is falsy (#DS-5170)

Author: NikGurev

packages/components/inline-edit/inline-edit.html

@@ -40,6 +40,7 @@
                     class="kbq-inline-edit__control-container"
                     [kbqTooltipColor]="colors.Error"
                     [kbqTooltip]="validationTooltip() ?? ''"
+                    [kbqTooltipDisabled]="!validationTooltip()"
                     [kbqTooltipArrow]="false"
                     [kbqTrigger]="'manual'"
                     [kbqPlacement]="tooltipPlacement() ?? placements.TopLeft"

packages/components/inline-edit/inline-edit.spec.ts

@@ -547,6 +547,60 @@ describe('KbqInlineEdit', () => {
             expect(overlay?.classList.contains('test-custom-inline-edit-panel')).toBeTruthy();
         });
     });
+
+    describe('validationTooltip', () => {
+        const openEditAndInvalidate = (fixture: ComponentFixture<TestWithDynamicValidationTooltip>) => {
+            const { componentInstance, debugElement } = fixture;
+            const inlineEditDebugElement = getInlineEditDebugElement(debugElement);
+
+            inlineEditDebugElement.nativeElement.click();
+            fixture.detectChanges();
+
+            getOverlayElement()!.querySelector<HTMLElement>('.kbq-textarea')?.focus();
+            componentInstance.control.markAsTouched();
+            componentInstance.control.updateValueAndValidity();
+            fixture.detectChanges();
+
+            return inlineEditDebugElement;
+        };
+
+        const clickSave = () => {
+            (
+                document.querySelector(`${componentCssClasses.panel} ${componentCssClasses.terminalButtons}`)!
+                    .firstElementChild as HTMLButtonElement
+            ).click();
+        };
+
+        it('should not show tooltip when empty string is passed and control is invalid', () => {
+            const fixture = setup(TestWithDynamicValidationTooltip);
+            const { componentInstance } = fixture;
+
+            componentInstance.validationTooltip.set('');
+
+            const inlineEditDebugElement = openEditAndInvalidate(fixture);
+            const tooltipTrigger = (inlineEditDebugElement.componentInstance as any).tooltipTrigger();
+            const showSpy = jest.spyOn(tooltipTrigger, 'show');
+
+            clickSave();
+
+            expect(showSpy).not.toHaveBeenCalled();
+        });
+
+        it('should show tooltip when message is provided and control is invalid', () => {
+            const fixture = setup(TestWithDynamicValidationTooltip);
+            const { componentInstance } = fixture;
+
+            componentInstance.validationTooltip.set('Required field');
+
+            const inlineEditDebugElement = openEditAndInvalidate(fixture);
+            const tooltipTrigger = (inlineEditDebugElement.componentInstance as any).tooltipTrigger();
+            const showSpy = jest.spyOn(tooltipTrigger, 'show');
+
+            clickSave();
+
+            expect(showSpy).toHaveBeenCalled();
+        });
+    });
 });
 
 @Directive({
@@ -909,6 +963,26 @@ export class TestWithSelect extends BaseTestComponent {
     cancel = jest.fn();
 }
 
+@Component({
+    selector: 'name',
+    imports: [ReactiveFormsModule, KbqFormFieldModule, KbqInlineEditModule, KbqTextareaModule],
+    template: `
+        <kbq-inline-edit showActions [validationTooltip]="validationTooltip()" (saved)="update()">
+            <div kbqInlineEditViewMode>{{ control.value }}</div>
+            <kbq-form-field kbqInlineEditEditMode>
+                <textarea kbqTextarea [formControl]="control"></textarea>
+            </kbq-form-field>
+        </kbq-inline-edit>
+    `,
+    providers: [kbqDisableLegacyValidationDirectiveProvider()]
+})
+export class TestWithDynamicValidationTooltip {
+    readonly control = new FormControl('', Validators.required);
+    readonly validationTooltip = signal('');
+
+    update() {}
+}
+
 @Component({
     selector: 'name',
     imports: [

packages/components/inline-edit/inline-edit.ts

@@ -311,7 +311,10 @@ export class KbqInlineEdit {
     protected save($event?: Event): void {
         if (this.isInvalid()) {
             $event?.stopPropagation();
-            this.showTooltipOnError() && this.tooltipTrigger()?.show();
+
+            if (this.showTooltipOnError() && this.validationTooltip()) {
+                this.tooltipTrigger()?.show();
+            }
         } else {
             this.toggleMode();
             this.saved.emit();