diff --git a/addons/stock/static/src/widgets/json_widget.js b/addons/stock/static/src/widgets/json_widget.js
index be8f9b910fa..2fde6c285f4 100644
--- a/addons/stock/static/src/widgets/json_widget.js
+++ b/addons/stock/static/src/widgets/json_widget.js
@@ -4,18 +4,22 @@ import { registry } from "@web/core/registry";
 import { _lt } from "@web/core/l10n/translation";
 import { useService } from "@web/core/utils/hooks";
 
-const { Component, onWillStart } = owl;
+const { Component, onWillStart, onWillUpdateProps } = owl;
 
-export class JsonPpopOver extends Component {
-    setup() {
-        this.props = { ...this.props, ...JSON.parse(this.props.value) };
+export class JsonPopOver extends Component {
+    
+    setup(){
+        this.jsonValue = JSON.parse(this.props.value);
+        onWillUpdateProps(nextProps => {
+            this.jsonValue = JSON.parse(nextProps.value);
+        });
     }
 }
 
-JsonPpopOver.displayName = _lt("Json Popup");
-JsonPpopOver.supportedTypes = ["char"];
+JsonPopOver.displayName = _lt("Json Popup");
+JsonPopOver.supportedTypes = ["char"];
 
-export class PopOverLeadDays extends JsonPpopOver {
+export class PopOverLeadDays extends JsonPopOver {
     setup() {
         super.setup();
         const user = useService("user");
@@ -39,14 +43,14 @@ export class PopOverLeadDays extends JsonPpopOver {
 
     _formatQty(field) {
         return this.displayUOM
-            ? `${this.props[field]} ${this.props.product_uom_name}`
-            : this.props[field];
+            ? `${this.jsonValue[field]} ${this.jsonValue.product_uom_name}`
+            : this.jsonValue[field];
     }
 }
 
-PopOverLeadDays.template = "stock.leadDaysPopOver";
+PopOverLeadDays.template = "stock.leadDays";
 
-export class ReplenishmentHistoryWidget extends JsonPpopOver {}
+export class ReplenishmentHistoryWidget extends JsonPopOver {}
 ReplenishmentHistoryWidget.template = "stock.replenishmentHistory";
 
 registry.category("fields").add("lead_days_widget", PopOverLeadDays);
diff --git a/addons/stock/static/src/widgets/json_widget.xml b/addons/stock/static/src/widgets/json_widget.xml
index f64f2568b78..08bf10810fc 100644
--- a/addons/stock/static/src/widgets/json_widget.xml
+++ b/addons/stock/static/src/widgets/json_widget.xml
@@ -1,29 +1,29 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
-    <div t-name="stock.leadDaysPopOver" owl="1">
+    <div t-name="stock.leadDays" owl="1">
         <h2>Lead Times</h2>
         <hr/>
         <p>
-            The forecasted stock on the <b t-esc="props.lead_days_date"/>
-            is <t t-if="props.qty_to_order &lt;= 0"><b><t t-esc="qtyForecast"/></b></t><t t-else="">
+            The forecasted stock on the <b t-esc="jsonValue.lead_days_date"/>
+            is <t t-if="jsonValue.qty_to_order &lt;= 0"><b><t t-esc="qtyForecast"/></b></t><t t-else="">
             below the inventory <b>minimum of <t t-esc="productMinQty"/>
             : <t t-esc="qtyToOrder"/> should be replenished</b> to reach the maximum of
             <t t-esc="productMaxQty"/>.</t>
         </p>
-        <table t-if="props.lead_days_description" class="table table-borderless table-sm">
+        <table t-if="jsonValue.lead_days_description" class="table table-borderless table-sm">
             <tbody>
                 <tr>
                     <td>Today</td>
-                    <td class="text-end" t-out="props.today"/>
+                    <td class="text-end" t-out="jsonValue.today"/>
                 </tr>
-                <tr t-foreach="props.lead_days_description" t-key="descr" t-as="descr">
+                <tr t-foreach="jsonValue.lead_days_description" t-key="descr" t-as="descr">
                     <td t-out="descr[0]"/>
                     <td class="text-end" t-out="descr[1]"/>
                 </tr>
                 <tr class="table-info">
                     <td>Forecasted Date</td>
                     <td class="text-end text-nowrap">
-                        = <t t-out="props.lead_days_date"/>
+                        = <t t-out="jsonValue.lead_days_date"/>
                     </td>
                 </tr>
             </tbody>
@@ -33,9 +33,9 @@
     <div t-name="stock.replenishmentHistory" owl="1">
         <h2>Sales History</h2>
         <hr/>
-        <table t-if="props.replenishment_history" class="table table-borderless">
+        <table t-if="jsonValue.replenishment_history" class="table table-borderless">
             <tbody>
-                <t t-foreach="props.replenishment_history" t-key="line" t-as="line">
+                <t t-foreach="jsonValue.replenishment_history" t-key="line" t-as="line">
                     <tr>
                         <td><t t-esc="line.name"/></td>
                         <td class="text-end text-nowrap" t-esc="line.quantity + ' ' + line.uom_name"/>