fixes table example + related combobox bug + adds test

Author: ChristianKienle

src/components/Combobox/Combobox.tsx

@@ -1,8 +1,6 @@
 import { mixins } from 'vue-class-component';
 import { UidMixin } from '@/mixins';
-import { Popover } from '@/components/Popover';
-import { Button } from '@/components/Button';
-import { Input, InputGroup } from '@/components/Form';
+import { MenuItem, Button, Popover, Input, InputGroup } from '@/components';
 import { Component, Event, Prop } from '@/core';
 
 interface Props {
@@ -41,14 +39,14 @@ export class Combobox extends mixins(UidMixin) {
   public $tsxProps!: Readonly<{}> & Readonly<Props>;
 
   private currentPopoverVisible: boolean = this.popoverVisible;
-  private currentValue: string | null = this.value;
+  private currentValue: string | number | null = this.value;
 
   public togglePopoverVisible() {
     this.currentPopoverVisible = !this.currentPopoverVisible;
     this.$emit('update:currentPopoverVisible', this.currentPopoverVisible);
   }
 
-  private setCurrentValue(newValue: string | null) {
+  private setCurrentValue(newValue: string | number | null) {
     this.currentValue = newValue;
     this.$emit('input', this.currentValue);
     this.$emit('update:value', this.currentValue);
@@ -63,13 +61,24 @@ export class Combobox extends mixins(UidMixin) {
     }
   }
 
+  private handleMenuItemClick(item: MenuItem) {
+    this.setCurrentValue(item.value);
+  }
+
   public render() {
     const dropdown = this.$slots.default;
     return (
       <div class='fd-combobox-input'>
-        <Popover noArrow={true} popoverVisible={this.currentPopoverVisible}>
+        <Popover
+          on-click={this.handleMenuItemClick}
+          noArrow={true}
+          popoverVisible={this.currentPopoverVisible}
+        >
           <div class='fd-combobox-control' slot='control'>
-            <InputGroup compact={this.compact} afterClass={'fd-input-group__addon--button'}>
+            <InputGroup
+              compact={this.compact}
+              afterClass='fd-input-group__addon--button'
+            >
               <Input
                 id={this.uid}
                 value={this.value}

src/components/Combobox/__tests__/Combobox.test.tsx

@@ -0,0 +1,33 @@
+import { assert } from 'chai';
+import { mount } from '@vue/test-utils';
+import { Combobox } from './../';
+import { MenuItem } from './../../Menu';
+
+describe('Combobox', () => {
+  it('supports vmodel', () => {
+    const wrapper = mount({
+      template: `
+      <Combobox v-model="value">
+        <MenuItem ref="menuItem1" value='1'>1</MenuItem>
+        <MenuItem value='2'>2</MenuItem>
+        <MenuItem value='3'>3</MenuItem>
+        <MenuItem value='4'>4</MenuItem>
+      </Combobox>
+      `,
+      data() {
+        return {
+          value: 'abc',
+        };
+      },
+      components: {
+        Combobox,
+        MenuItem,
+      },
+    });
+    const item = wrapper.find({ ref: 'menuItem1' });
+    item.find('a').trigger('click');
+    assert.strictEqual(item.text(), '1'); // ensure that we have selected the correct item
+    // @ts-ignore
+    assert.strictEqual(wrapper.vm.value, '1');
+  });
+});

src/docs/pages/Table/1-complex.vue

@@ -8,27 +8,26 @@
       <FdTableColumn sortable prop="lastName" label="Last Name" />
       <FdTableColumn label="Initials">
         <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.firstName }}_{{ scope.row.lastName }}</span>
+          <span style="margin-left: 10px">
+            {{ scope.row.firstName }}_{{ scope.row.lastName }}
+          </span>
         </template>
       </FdTableColumn>
     </FdTable>
     <FdFormSet>
-      <FdFormItem>
-        <FdFormLabel>First Name</FdFormLabel>
+      <FdFormItem label="First Name">
         <FdInput v-model="newEntry.firstName" placeholder="Enter something nice"/>
       </FdFormItem>
-      <FdFormItem>
-        <FdFormLabel>Last Name</FdFormLabel>
+      <FdFormItem label="Last Name">
         <FdInput v-model="newEntry.lastName" placeholder="Enter something nice"/>
       </FdFormItem>
-      <FdFormItem>
-        <FdFormLabel>Rating</FdFormLabel>
+      <FdFormItem label="Rating">
         <FdCombobox v-model="newEntry.rating">
-          <FdMenuItem value="1" title="1">1</FdMenuItem>
-          <FdMenuItem value="2" title="2">2</FdMenuItem>
-          <FdMenuItem value="3" title="3">3</FdMenuItem>
-          <FdMenuItem value="4" title="4">4</FdMenuItem>
-          <FdMenuItem value="4" title="5">5</FdMenuItem>
+          <FdMenuItem value="1">1</FdMenuItem>
+          <FdMenuItem value="2">2</FdMenuItem>
+          <FdMenuItem value="3">3</FdMenuItem>
+          <FdMenuItem value="4">4</FdMenuItem>
+          <FdMenuItem value="5">5</FdMenuItem>
         </FdCombobox>
       </FdFormItem>
     </FdFormSet>
@@ -40,24 +39,31 @@
 export default {
   methods: {
     addCurrentEntry() {
-      const tableEntry = { ...this.newEntry, building: null, rating: this.newEntry.rating.value };
-      this.tableData.push(tableEntry);
+      const entry = {
+        ...this.newEntry,
+      };
+      this.tableData = [...this.tableData, entry];
+      this.newEntry = {
+        firstName: null,
+        lastName: null,
+        rating: "1"
+      };
     },
   },
   data() {
     return {
       newEntry: {
         firstName: null,
         lastName: null,
-        rating: '1',
+        rating: "1",
       },
       tableData: [
-        { rating: 1, firstName: 'Chris', lastName: 'Kienle', building: 'WFD02' },
-        { rating: 2, firstName: 'Andi', lastName: 'Kienle', building: 'WFD03' },
-        { rating: 3, firstName: 'Sven', lastName: 'Bacia', building: 'WFD02' },
-        { rating: 4, firstName: 'Artur', lastName: 'Raess', building: 'WFD02' },
+        { rating: 1, firstName: "Chris", lastName: "Kienle" },
+        { rating: 2, firstName: "Andi", lastName: "Kienle" },
+        { rating: 3, firstName: "Sven", lastName: "Bacia" },
+        { rating: 4, firstName: "Artur", lastName: "Raess" },
       ],
     };
   },
 };
-</script>
+</script>