diff --git a/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx b/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx
index ecefd8fc4..fe42a2da1 100644
--- a/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx
@@ -48,7 +48,33 @@ class Edit extends SubblocksEdit {
constructor(props) {
super(props);
this.state.selectedField = 'title';
+
+ this.state = {
+ ...this.state,
+ icon1: '',
+ icon2: '',
+ icon3: '',
+ };
+ }
+
+ componentDidMount() {
+ this.setIconValues(this.props.data);
+ }
+
+ componentDidUpdate(prevProps) {
+ if (prevProps.data !== this.props.data) {
+ this.setIconValues(this.props.data);
+ }
+ }
+
+ setIconValues(data) {
+ this.setState({
+ icon1: data.icon1,
+ icon2: data.icon2,
+ icon3: data.icon3,
+ });
}
+
/**
* Render method.
* @method render
@@ -89,15 +115,18 @@ class Edit extends SubblocksEdit {
this.props.data.icon2 ||
this.props.data.icon3 ? (
- {this.props.data.icon1?.length > 0 && (
-
- )}
- {this.props.data.icon2?.length > 0 && (
-
- )}
- {this.props.data.icon3?.length > 0 && (
-
- )}
+ {this.state.icon1?.length > 0 &&
+ this.state.icon1 === this.props.data.icon1 && (
+
+ )}
+ {this.state.icon2?.length > 0 &&
+ this.state.icon2 === this.props.data.icon2 && (
+
+ )}
+ {this.state.icon3?.length > 0 &&
+ this.state.icon3 === this.props.data.icon3 && (
+
+ )}
) : (
diff --git a/src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx b/src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx
index 7c8f2606c..40a831d78 100644
--- a/src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx
+++ b/src/components/ItaliaTheme/manage/Widgets/IconPreviewWidget.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme';
import { defineMessages, useIntl } from 'react-intl';
@@ -14,6 +14,12 @@ const messages = defineMessages({
const IconPreviewWidget = ({ icon, onEdit, title, description, children }) => {
const intl = useIntl();
const parts = icon?.split(' ') ?? [];
+ const [iconValue, setIconValue] = useState('');
+
+ useEffect(() => {
+ setIconValue(icon);
+ }, [icon]);
+
return (
@@ -26,22 +32,23 @@ const IconPreviewWidget = ({ icon, onEdit, title, description, children }) => {
- {icon ? (
- <>
- {parts.length > 1 ? (
-
- ) : (
-
- )}
- >
- ) : (
-
- {intl.formatMessage(messages.previewIconSelected)}
-
- )}
+ {icon === iconValue &&
+ (icon ? (
+ <>
+ {parts.length > 1 ? (
+
+ ) : (
+
+ )}
+ >
+ ) : (
+
+ {intl.formatMessage(messages.previewIconSelected)}
+
+ ))}