fix(autocomplete): update input element disabled state (#2555)

(cherry picked from commit 23e59ba)

Author: sashaqred

src/app/playground-components.ts

@@ -151,6 +151,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'AutocompleteActiveFirstComponent',
         name: 'Autocomplete Active First',
       },
+      {
+        path: 'autocomplete-disabled.component',
+        link: '/autocomplete/autocomplete-disabled.component',
+        component: 'AutocompleteDisabledComponent',
+        name: 'Autocomplete Disabled',
+      },
     ],
   },
   {

src/framework/theme/components/autocomplete/autocomplete.component.spec.ts

@@ -314,4 +314,14 @@ describe('Component: NbAutocompleteComponent', () => {
     expect(autocompleteDirective.isClosed).toBe(true);
   });
 
+  it('should update disabled state', () => {
+    autocompleteDirective.setDisabledState(true);
+    fixture.detectChanges();
+    expect(input.disabled).toBe(true);
+
+    autocompleteDirective.setDisabledState(false);
+    fixture.detectChanges();
+    expect(input.disabled).toBe(false);
+  });
+
 });

src/framework/theme/components/autocomplete/autocomplete.directive.ts

@@ -15,7 +15,9 @@ import {
   HostListener,
   Input,
   OnDestroy,
+  Optional,
   QueryList,
+  Renderer2,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NbOverlayRef, NbScrollStrategy } from '../cdk/overlay/mapping';
@@ -189,6 +191,8 @@ export class NbAutocompleteDirective<T> implements OnDestroy, AfterViewInit, Con
     protected triggerStrategyBuilder: NbTriggerStrategyBuilderService,
     protected positionBuilder: NbPositionBuilderService,
     protected activeDescendantKeyManagerFactory: NbActiveDescendantKeyManagerFactoryService<NbOptionComponent<T>>,
+    // @breaking-change @7.0.0 Make renderer required.
+    @Optional() protected renderer?: Renderer2,
   ) {}
 
   ngAfterViewInit() {
@@ -260,6 +264,15 @@ export class NbAutocompleteDirective<T> implements OnDestroy, AfterViewInit, Con
     this._onTouched = fn;
   }
 
+  setDisabledState(disabled: boolean): void {
+    // @breaking-change @7.0.0 Keep only `this.renderer.setProperty` without `if/else`.
+    if (this.renderer) {
+      this.renderer.setProperty(this.hostRef.nativeElement, 'disabled', disabled);
+    } else if (this.hostRef.nativeElement) {
+      this.hostRef.nativeElement.disabled = disabled;
+    }
+  }
+
   protected subscribeOnOptionClick() {
     /**
      * If the user changes provided options list in the runtime we have to handle this

src/playground/with-layout/autocomplete/autocomplete-disabled.component.html

@@ -0,0 +1,31 @@
+<nb-card size="small">
+  <nb-card-body class="example-items-col">
+
+    <button (click)="toggleDisabled()" nbButton>Toggle disabled</button>
+
+    <label>
+      <span class="label">Disabled via <i>disabled</i> attribute</span>
+      <input [nbAutocomplete]="auto"
+             [disabled]="disabled"
+             nbInput
+             type="text"
+             placeholder="Plain input" />
+    </label>
+
+    <label>
+      <span class="label">Disabled via <i>formControl</i></span>
+      <input [nbAutocomplete]="auto"
+             [formControl]="inputFormControl"
+             nbInput
+             type="text"
+             placeholder="Form control" />
+    </label>
+
+    <nb-autocomplete #auto>
+      <nb-option *ngFor="let option of options" [value]="option">
+        {{ option }}
+      </nb-option>
+    </nb-autocomplete>
+
+  </nb-card-body>
+</nb-card>

src/playground/with-layout/autocomplete/autocomplete-disabled.component.scss

@@ -0,0 +1,4 @@
+.label {
+  display: block;
+  margin-bottom: 0.5rem;
+}

src/playground/with-layout/autocomplete/autocomplete-disabled.component.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  templateUrl: './autocomplete-disabled.component.html',
+  styleUrls: ['./autocomplete-disabled.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AutocompleteDisabledComponent {
+  options = ['Option 1', 'Option 2', 'Option 3'];
+  disabled = true;
+  inputFormControl = new FormControl();
+
+  toggleDisabled() {
+    this.disabled = !this.disabled;
+    if (this.disabled) {
+      this.inputFormControl.disable();
+    } else {
+      this.inputFormControl.enable();
+    }
+  }
+}

src/playground/with-layout/autocomplete/autocomplete-routing.module.ts

@@ -11,6 +11,7 @@ import { AutocompleteFormComponent } from './autocomplete-form.component';
 import { AutocompleteGroupComponent } from './autocomplete-group.component';
 import { AutocompleteCustomDisplayComponent } from './autocomplete-custom-display.component';
 import { AutocompleteActiveFirstComponent } from './autocomplete-active-first.component';
+import { AutocompleteDisabledComponent } from './autocomplete-disabled.component';
 
 const routes: Route[] = [
   {
@@ -33,6 +34,10 @@ const routes: Route[] = [
     path: 'autocomplete-active-first.component',
     component: AutocompleteActiveFirstComponent,
   },
+  {
+    path: 'autocomplete-disabled.component',
+    component: AutocompleteDisabledComponent,
+  },
 ];
 
 @NgModule({

src/playground/with-layout/autocomplete/autocomplete.module.ts

@@ -5,14 +5,15 @@
  */
 
 import { NgModule } from '@angular/core';
-import { NbAutocompleteModule, NbCardModule, NbInputModule } from '@nebular/theme';
+import { NbAutocompleteModule, NbButtonModule, NbCardModule, NbInputModule } from '@nebular/theme';
 import { AutocompleteShowcaseComponent } from './autocomplete-showcase.component';
 import { AutocompleteRoutingModule } from './autocomplete-routing.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AutocompleteFormComponent } from './autocomplete-form.component';
 import { AutocompleteGroupComponent } from './autocomplete-group.component';
 import { AutocompleteCustomDisplayComponent } from './autocomplete-custom-display.component';
 import { AutocompleteActiveFirstComponent } from './autocomplete-active-first.component';
+import { AutocompleteDisabledComponent } from './autocomplete-disabled.component';
 import { CommonModule } from '@angular/common';
 
 @NgModule({
@@ -22,13 +23,15 @@ import { CommonModule } from '@angular/common';
     AutocompleteGroupComponent,
     AutocompleteCustomDisplayComponent,
     AutocompleteActiveFirstComponent,
+    AutocompleteDisabledComponent,
   ],
   exports: [
     AutocompleteShowcaseComponent,
     AutocompleteFormComponent,
     AutocompleteGroupComponent,
     AutocompleteCustomDisplayComponent,
     AutocompleteActiveFirstComponent,
+    AutocompleteDisabledComponent,
   ],
   imports: [
     CommonModule,
@@ -38,6 +41,7 @@ import { CommonModule } from '@angular/common';
     NbInputModule,
     AutocompleteRoutingModule,
     NbCardModule,
+    NbButtonModule,
   ],
 })
 export class AutocompleteModule {}