diff --git a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/tests/unit/displayers/DisplayerNumber.spec.js b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/tests/unit/displayers/DisplayerNumber.spec.js
new file mode 100644
index 00000000000..ca2700df47a
--- /dev/null
+++ b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/tests/unit/displayers/DisplayerNumber.spec.js
@@ -0,0 +1,53 @@
+/*
+ * See the NOTICE file distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 2.1 of
+ * the License, or (at your option) any later version.
+ *
+ * This software is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this software; if not, write to the Free
+ * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
+ * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
+ */
+
+import DisplayerNumber from "../../../displayers/DisplayerNumber";
+import {initWrapper} from "./displayerTestsHelper";
+
+describe('DisplayerNumber.vue', () => {
+  it('Renders an entry in view mode', () => {
+    const wrapper = initWrapper(DisplayerNumber, {
+      props: {
+        propertyId: 'quantity',
+        entry: {
+          quantity: 42
+        }
+      }
+    })
+    expect(wrapper.text()).toMatch('42')
+  })
+
+  it('Renders an entry in edit mode', async () => {
+    const wrapper = initWrapper(DisplayerNumber, {
+      props: {
+        propertyId: 'quantity',
+        entry: {
+          quantity: 42
+        }
+      }
+    })
+
+    const viewerDiv = wrapper.find('div[tabindex="0"]');
+    await viewerDiv.trigger('dblclick');
+
+    expect(wrapper.find('input').element.value).toBe('42')
+    expect(wrapper.find('input').element).toHaveFocus()
+  })
+})
\ No newline at end of file
diff --git a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/displayers/DisplayerNumber.vue b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/displayers/DisplayerNumber.vue
index 426284143ea..5b210a0d4e2 100644
--- a/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/displayers/DisplayerNumber.vue
+++ b/xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/displayers/DisplayerNumber.vue
@@ -32,6 +32,8 @@
     class="displayer-number"
     :property-id="propertyId"
     :entry="entry"
+    :is-view.sync="isView"
+    @saveEdit="genericSave"
   >
 
     <!-- Keep the default Viewer widget -->
@@ -48,6 +50,7 @@
 
 import displayerMixin from "./displayerMixin.js";
 import BaseDisplayer from "./BaseDisplayer.vue";
+import displayerStatesMixin from "./displayerStatesMixin";
 
 export default {
 
@@ -58,7 +61,7 @@ export default {
   },
 
   // Add the displayerMixin to get access to all the displayers methods and computed properties inside this component
-  mixins: [displayerMixin],
+  mixins: [displayerMixin, displayerStatesMixin],
 
 };
 </script>