fix(select): allow select to work with empty values in nb-option

src/framework/theme/components/select/select.component.ts

@@ -370,10 +370,6 @@ export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContent
   }
 
   writeValue(value: T | T[]): void {
-    if (!value) {
-      return;
-    }
-
     if (this.options) {
       this.setSelection(value);
     } else {
@@ -385,7 +381,7 @@ export class NbSelectComponent<T> implements OnInit, AfterViewInit, AfterContent
    * Selects option or clear all selected options if value is null.
    * */
   protected handleSelect(option: NbOptionComponent<T>) {
-    if (option.value) {
+    if (this.options.some((opt) => opt.content === option.content)) {
       this.selectOption(option);
     } else {
       this.reset();

src/framework/theme/components/select/select.spec.ts

@@ -42,6 +42,14 @@ const TEST_GROUPS = [
       { title: 'Option 33', value: 'Option 33' },
     ],
   },
+  {
+    title: 'Group 4',
+    options: [
+      { title: 'Option 41', value: '' },
+      { title: 'Option 42', value: '0' },
+      { title: 'Option 43', value: 0 },
+    ],
+  },
 ];
 
 @Component({
@@ -219,6 +227,72 @@ describe('Component: NbSelectComponent', () => {
 
       const button = fixture.nativeElement.querySelector('button');
       expect(button.textContent).toContain('1 noitpO');
-    })
+    });
+  });
+
+  it('should render default label when selecting option with value of empty string', () => {
+    setSelectedAndOpen('');
+    const selected = overlayContainer.querySelector('nb-option.selected');
+
+    expect(selected).toBeTruthy();
+    expect(selected.textContent).toEqual('Option 41');
+  });
+
+  it('should render default label when option with value of empty string is clicked', () => {
+    setSelectedAndOpen('Option 1');
+
+    const option = overlayContainer.querySelectorAll('nb-option')[10];
+    option.dispatchEvent(new Event('click'));
+
+    fixture.detectChanges();
+    select.show();
+
+    const selected = overlayContainer.querySelectorAll('nb-option.selected');
+    expect(selected.length).toBe(1);
+    expect(selected[0].textContent).toEqual('Option 41');
+  });
+
+  it('should render default label when selecting option with value "0"', () => {
+    setSelectedAndOpen('0');
+    const selected = overlayContainer.querySelector('nb-option.selected');
+
+    expect(selected).toBeTruthy();
+    expect(selected.textContent).toEqual('Option 42');
+  });
+
+  it('should render default label when option with value of "0" is clicked', () => {
+    setSelectedAndOpen('Option 1');
+
+    const option = overlayContainer.querySelectorAll('nb-option')[11];
+    option.dispatchEvent(new Event('click'));
+
+    fixture.detectChanges();
+    select.show();
+
+    const selected = overlayContainer.querySelectorAll('nb-option.selected');
+    expect(selected.length).toBe(1);
+    expect(selected[0].textContent).toEqual('Option 42');
+  });
+
+  it('should render default label when selecting option with value of 0', () => {
+    setSelectedAndOpen(0);
+    const selected = overlayContainer.querySelector('nb-option.selected');
+
+    expect(selected).toBeTruthy();
+    expect(selected.textContent).toEqual('Option 43');
+  });
+
+  it('should render default label when option with value of 0 is clicked', () => {
+    setSelectedAndOpen('Option 1');
+
+    const option = overlayContainer.querySelectorAll('nb-option')[12];
+    option.dispatchEvent(new Event('click'));
+
+    fixture.detectChanges();
+    select.show();
+
+    const selected = overlayContainer.querySelectorAll('nb-option.selected');
+    expect(selected.length).toBe(1);
+    expect(selected[0].textContent).toEqual('Option 43');
   });
 });

src/playground/with-layout/select/select-showcase.component.html

@@ -1,7 +1,8 @@
 <nb-select placeholder="Select Showcase" [(selected)]="selectedItem">
+  <nb-option value="">Option empty</nb-option>
+  <nb-option value="0">Option 0</nb-option>
   <nb-option value="1">Option 1</nb-option>
   <nb-option value="2">Option 2</nb-option>
   <nb-option value="3">Option 3</nb-option>
   <nb-option value="4">Option 4</nb-option>
 </nb-select>
-