diff --git a/package-lock.json b/package-lock.json
index 50140ddcd..c4f335894 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ebury/chameleon-components",
-      "version": "1.11.0",
+      "version": "1.11.1",
       "license": "MIT",
       "dependencies": {
         "clipboard-copy": "3.2.0",
diff --git a/package.json b/package.json
index 37e793acd..9bd9d642c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",
diff --git a/src/components/ec-datepicker/__snapshots__/ec-datepicker.spec.js.snap b/src/components/ec-datepicker/__snapshots__/ec-datepicker.spec.js.snap
index 208f93ff6..652a8d7d5 100644
--- a/src/components/ec-datepicker/__snapshots__/ec-datepicker.spec.js.snap
+++ b/src/components/ec-datepicker/__snapshots__/ec-datepicker.spec.js.snap
@@ -1111,7 +1111,7 @@ exports[`Datepicker :props should render as disabled 1`] = `
     class="ec-input-field__input ec-input-field__input--has-icon flatpickr-input"
     data-test="ec-datepicker ec-input-field__input"
     disabled="disabled"
-    id="datepicker-1"
+    id="ec-datepicker-1"
     type="text"
   />
    
@@ -1695,7 +1695,7 @@ exports[`Datepicker :props should render with a bottom note 1`] = `
     autocomplete="off"
     class="ec-input-field__input ec-input-field__input--has-icon flatpickr-input"
     data-test="ec-datepicker ec-input-field__input"
-    id="datepicker-1"
+    id="ec-datepicker-1"
     type="text"
   />
    
@@ -1735,7 +1735,7 @@ exports[`Datepicker :props should render with a bottom note in a warning state 1
     autocomplete="off"
     class="ec-input-field__input ec-input-field__input--has-icon flatpickr-input"
     data-test="ec-datepicker ec-input-field__input"
-    id="datepicker-1"
+    id="ec-datepicker-1"
     type="text"
   />
    
@@ -1772,7 +1772,7 @@ exports[`Datepicker :props should render with a label 1`] = `
   <label
     class="ec-input-field__label"
     data-test="ec-input-field__label"
-    for="datepicker-1"
+    for="ec-datepicker-1"
   >
     <span
       class="ec-input-field__label-text"
@@ -1789,7 +1789,7 @@ exports[`Datepicker :props should render with a label 1`] = `
     autocomplete="off"
     class="ec-input-field__input ec-input-field__input--has-icon flatpickr-input"
     data-test="ec-datepicker ec-input-field__input"
-    id="datepicker-1"
+    id="ec-datepicker-1"
     type="text"
   />
    
@@ -1821,7 +1821,7 @@ exports[`Datepicker :props should render with a note 1`] = `
   <label
     class="ec-input-field__label"
     data-test="ec-input-field__label"
-    for="datepicker-1"
+    for="ec-datepicker-1"
   >
     <!---->
      
@@ -1837,7 +1837,7 @@ exports[`Datepicker :props should render with a note 1`] = `
     autocomplete="off"
     class="ec-input-field__input ec-input-field__input--has-icon flatpickr-input"
     data-test="ec-datepicker ec-input-field__input"
-    id="datepicker-1"
+    id="ec-datepicker-1"
     type="text"
   />
    
@@ -1872,7 +1872,7 @@ exports[`Datepicker :props should render with a placeholder 1`] = `
     autocomplete="off"
     class="ec-input-field__input ec-input-field__input--has-icon flatpickr-input"
     data-test="ec-datepicker ec-input-field__input"
-    id="datepicker-1"
+    id="ec-datepicker-1"
     placeholder="Datepicker placeholder"
     type="text"
   />
@@ -1909,7 +1909,7 @@ exports[`Datepicker :props should render with an error message 1`] = `
     autocomplete="off"
     class="ec-input-field__input ec-input-field__input--has-error ec-input-field__input--has-icon flatpickr-input"
     data-test="ec-datepicker ec-input-field__input"
-    id="datepicker-1"
+    id="ec-datepicker-1"
     type="text"
   />
    
@@ -5793,7 +5793,7 @@ exports[`Datepicker should render properly 1`] = `
     autocomplete="off"
     class="ec-input-field__input ec-input-field__input--has-icon flatpickr-input"
     data-test="ec-datepicker ec-input-field__input"
-    id="datepicker-1"
+    id="ec-datepicker-1"
     type="text"
   />
    
diff --git a/src/components/ec-datepicker/ec-datepicker.spec.js b/src/components/ec-datepicker/ec-datepicker.spec.js
index e2e940747..000af3a04 100644
--- a/src/components/ec-datepicker/ec-datepicker.spec.js
+++ b/src/components/ec-datepicker/ec-datepicker.spec.js
@@ -196,7 +196,7 @@ describe('Datepicker', () => {
         },
       );
 
-      expect(inputWrapper.findByDataTest('ec-input-field__input').element.value).toBe('22/02/2022');
+      expect(inputWrapper.findByDataTest('ec-datepicker').element.value).toBe('22/02/2022');
     });
   });
 
@@ -240,6 +240,14 @@ describe('Datepicker', () => {
 
       expect(inputWrapper.emitted('close').length).toBe(1);
     });
+
+    it('@blur - should be emitted when the input blurs', async () => {
+      const { inputWrapper } = mountDatepicker();
+
+      await inputWrapper.findByDataTest('ec-datepicker').trigger('blur');
+
+      expect(inputWrapper.emitted('blur').length).toBe(1);
+    });
   });
 
   describe('watchers', () => {
@@ -325,13 +333,13 @@ describe('Datepicker', () => {
         .findByDataTest('ec-datepicker__calendar-day--2022-02-24')
         .trigger('click');
 
-      expect(inputWrapper.findByDataTest('ec-input-field__input').element.value).toBe('2022-02-24');
+      expect(inputWrapper.findByDataTest('ec-datepicker').element.value).toBe('2022-02-24');
 
       await inputWrapper.setProps({
         dateFormat: 'd/m/Y',
       });
 
-      expect(inputWrapper.findByDataTest('ec-input-field__input').element.value).toBe('24/02/2022');
+      expect(inputWrapper.findByDataTest('ec-datepicker').element.value).toBe('24/02/2022');
     });
 
     it('should update the locale', async () => {
@@ -362,6 +370,7 @@ describe('Datepicker', () => {
       );
 
       expect(inputWrapper.vm.model.getTime()).toBe(new Date('2022-02-22').getTime());
+      expect(inputWrapper.findByDataTest('ec-datepicker').element.value).toBe('2022-02-22');
     });
 
     it('should update the value of the calendar when I type a value', async () => {
@@ -377,15 +386,51 @@ describe('Datepicker', () => {
         },
       );
 
-      await inputWrapper.findByDataTest('ec-input-field__input').setValue('2022-02-23');
-      // When allowInput is true, flatpickr is listening to blur event
-      // https://github.com/flatpickr/flatpickr/blob/master/src/index.ts#L493
-      await inputWrapper.findByDataTest('ec-input-field__input').trigger('blur');
+      await setDatepickerInputValue(inputWrapper, '2022-02-23');
 
-      expect(inputWrapper.findByDataTest('ec-input-field__input').element.value).toBe('2022-02-23');
+      expect(inputWrapper.findByDataTest('ec-datepicker').element.value).toBe('2022-02-23');
       expect(inputWrapper.vm.model.getTime()).toBe(new Date(2022, 1, 23).getTime());
     });
 
+    it('should clear the value in the input when a null gets passed to the model', async () => {
+      const { inputWrapper } = mountDatepickerAsTemplate(
+        '<ec-datepicker v-model="model" />',
+        {},
+        {
+          data() {
+            return {
+              model: new Date('2022-02-23'),
+            };
+          },
+        },
+      );
+
+      await inputWrapper.setData({
+        model: null,
+      });
+
+      expect(inputWrapper.findByDataTest('ec-datepicker').element.value).toBe('');
+    });
+
+    it('should clear the model value when the input value gets deleted', async () => {
+      const { inputWrapper } = mountDatepickerAsTemplate(
+        '<ec-datepicker v-model="model" />',
+        {},
+        {
+          data() {
+            return {
+              model: new Date('2022-02-23'),
+            };
+          },
+        },
+      );
+
+      await setDatepickerInputValue(inputWrapper, '');
+
+      expect(inputWrapper.findByDataTest('ec-datepicker').element.value).toBe('');
+      expect(inputWrapper.vm.model).toBe(null);
+    });
+
     it('should update the value of the calendar when I select a value from the datepicker', async () => {
       const { inputWrapper, calendarWrapper } = mountDatepickerAsTemplate(
         '<ec-datepicker v-model="model" />',
@@ -465,3 +510,10 @@ describe('Datepicker', () => {
     });
   });
 });
+
+async function setDatepickerInputValue(inputWrapper, value) {
+  inputWrapper.findByDataTest('ec-datepicker').setValue(value);
+  // When allowInput is true, flatpickr is listening to blur event
+  // https://github.com/flatpickr/flatpickr/blob/master/src/index.ts#L493
+  await inputWrapper.findByDataTest('ec-datepicker').trigger('blur');
+}
diff --git a/src/components/ec-datepicker/ec-datepicker.vue b/src/components/ec-datepicker/ec-datepicker.vue
index 584c75711..816bc2132 100644
--- a/src/components/ec-datepicker/ec-datepicker.vue
+++ b/src/components/ec-datepicker/ec-datepicker.vue
@@ -16,6 +16,7 @@
     :disabled="isDisabled"
     :value="formattedValue"
     @icon-click="openCalendar()"
+    @blur="onBlur"
     v-on="getListeners()"
   />
 </template>
@@ -91,12 +92,12 @@ export default {
   data() {
     return {
       uid: getUid(),
-      formattedValue: null,
+      formattedValue: '',
     };
   },
   computed: {
     id() {
-      return `datepicker-${this.uid}`;
+      return `ec-datepicker-${this.uid}`;
     },
   },
   watch: {
@@ -115,6 +116,10 @@ export default {
       if (newValue && newValue !== oldValue && !this.datesAreEqual(newValue, oldValue)) {
         this.flatpickrInstance.setDate(newValue, true);
       }
+
+      if (!newValue) {
+        this.flatpickrInstance.clear();
+      }
     },
     dateFormat(newValue) {
       /* istanbul ignore next */
@@ -149,6 +154,19 @@ export default {
   },
   mounted() {
     this.flatpickrInstance = flatpickr(this.$refs.input.getInputRef(), this.mergeWithDefaultOptions(this.options));
+
+    /* istanbul ignore next */
+    if (this.flatpickrInstance.input) {
+      // sync the value to the formattedValue after the flatpickr is initialized.
+      //
+      // if the 'value' prop contains any initial value, that value got passed to the flatpickr via defaultValue option
+      // and a formatted value may be visible in the input now. we need to get that value from input to our
+      // formattedValue in order to keep it in sync.
+      // if we don't do that, an empty formattedValue can be passed to the ec-input-field via Vue props
+      // in the nextTick, and that would reset the value in the input and in the flatpickr.
+      this.formattedValue = this.flatpickrInstance.input.value;
+    }
+
     /* istanbul ignore next */
     if (this.flatpickrInstance.calendarContainer) {
       this.flatpickrInstance.calendarContainer.dataset.test = 'ec-datepicker__calendar';
@@ -171,6 +189,7 @@ export default {
       delete listeners.open;
       delete listeners.close;
       delete listeners.ready;
+      delete listeners.blur;
 
       return listeners;
     },
@@ -191,11 +210,9 @@ export default {
         onReady: [...(this.options.onReady ?? []), () => {
           this.$emit('ready');
         }],
-        // eslint-disable-next-line no-unused-vars
-        onChange: (selectedDates, dateStr, instance) => {
-          const d = selectedDates[0];
+        onChange: (selectedDates, dateStr) => {
           this.formattedValue = dateStr;
-          this.$emit('value-change', d);
+          this.$emit('value-change', selectedDates[0] ?? null);
         },
         onOpen: [...(this.options.onOpen ?? []), () => {
           this.$emit('open');
@@ -259,6 +276,12 @@ export default {
 
       return date1 === date2;
     },
+    onBlur(evt) {
+      this.$emit('blur', evt);
+      if (this.flatpickrInstance && !this.flatpickrInstance.input.value) {
+        this.$emit('value-change', null);
+      }
+    },
   },
 };
 </script>