From 3e574857cd4dcc0afb4d7dc20959a926d2e5bc5a Mon Sep 17 00:00:00 2001
From: Gervwyk <gervwyk@gmail.com>
Date: Wed, 23 Oct 2024 19:10:48 +0200
Subject: [PATCH] fix(blocks-antd): Randomize popup dom element ids.

---
 .changeset/late-cameras-roll.md                            | 5 +++++
 .../src/blocks/DateRangeSelector/DateRangeSelector.js      | 7 ++++---
 .../blocks-antd/src/blocks/DateSelector/DateSelector.js    | 7 ++++---
 .../src/blocks/DateTimeSelector/DateTimeSelector.js        | 7 ++++---
 .../blocks-antd/src/blocks/MonthSelector/MonthSelector.js  | 7 ++++---
 .../src/blocks/MultipleSelector/MultipleSelector.js        | 3 ++-
 .../blocks/blocks-antd/src/blocks/Popover/Popover.js       | 7 ++++---
 .../blocks/blocks-antd/src/blocks/Selector/Selector.js     | 5 +++--
 .../blocks-antd/src/blocks/WeekSelector/WeekSelector.js    | 7 ++++---
 9 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/late-cameras-roll.md

diff --git a/.changeset/late-cameras-roll.md b/.changeset/late-cameras-roll.md
new file mode 100644
index 000000000..158eb55ef
--- /dev/null
+++ b/.changeset/late-cameras-roll.md
@@ -0,0 +1,5 @@
+---
+'@lowdefy/blocks-antd': patch
+---
+
+Bug fix: Randomize popup dom element ids to better attach on block reuse on page.
diff --git a/packages/plugins/blocks/blocks-antd/src/blocks/DateRangeSelector/DateRangeSelector.js b/packages/plugins/blocks/blocks-antd/src/blocks/DateRangeSelector/DateRangeSelector.js
index 42236afa7..352ad2437 100644
--- a/packages/plugins/blocks/blocks-antd/src/blocks/DateRangeSelector/DateRangeSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/DateRangeSelector/DateRangeSelector.js
@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { DatePicker } from 'antd';
 import moment from 'moment';
 import { blockDefaultProps } from '@lowdefy/block-utils';
@@ -42,6 +42,7 @@ const DateRangeSelector = ({
   validation,
   value,
 }) => {
+  const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
   return (
     <Label
       blockId={blockId}
@@ -53,7 +54,7 @@ const DateRangeSelector = ({
       content={{
         content: () => (
           <div className={methods.makeCssClass({ width: '100%' })}>
-            <div id={`${blockId}_popup`} />
+            <div id={`${blockId}_${elementId}_popup`} />
             <RangePicker
               id={`${blockId}_input`}
               allowClear={properties.allowClear !== false}
@@ -63,7 +64,7 @@ const DateRangeSelector = ({
               disabled={properties.disabled || loading}
               disabledDate={disabledDate(properties.disabledDates)}
               format={properties.format ?? 'YYYY-MM-DD'}
-              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
+              getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
               separator={properties.separator ?? '~'}
               size={properties.size}
               status={validation.status}
diff --git a/packages/plugins/blocks/blocks-antd/src/blocks/DateSelector/DateSelector.js b/packages/plugins/blocks/blocks-antd/src/blocks/DateSelector/DateSelector.js
index 7cc6f27c2..492b47840 100644
--- a/packages/plugins/blocks/blocks-antd/src/blocks/DateSelector/DateSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/DateSelector/DateSelector.js
@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import React from 'react';
+import React, { useState } from 'react';
 import moment from 'moment';
 import { type } from '@lowdefy/helpers';
 import { blockDefaultProps } from '@lowdefy/block-utils';
@@ -34,6 +34,7 @@ const DateSelector = ({
   validation,
   value,
 }) => {
+  const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
   return (
     <Label
       blockId={blockId}
@@ -45,7 +46,7 @@ const DateSelector = ({
       content={{
         content: () => (
           <div className={methods.makeCssClass({ width: '100%' })}>
-            <div id={`${blockId}_popup`} />
+            <div id={`${blockId}_${elementId}_popup`} />
             <DatePicker
               id={`${blockId}_input`}
               allowClear={properties.allowClear !== false}
@@ -54,7 +55,7 @@ const DateSelector = ({
               className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])}
               disabled={properties.disabled || loading}
               format={properties.format ?? 'YYYY-MM-DD'}
-              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
+              getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
               placeholder={properties.placeholder ?? 'Select Date'}
               showToday={properties.showToday}
               size={properties.size}
diff --git a/packages/plugins/blocks/blocks-antd/src/blocks/DateTimeSelector/DateTimeSelector.js b/packages/plugins/blocks/blocks-antd/src/blocks/DateTimeSelector/DateTimeSelector.js
index 2a17d404b..76162e05b 100644
--- a/packages/plugins/blocks/blocks-antd/src/blocks/DateTimeSelector/DateTimeSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/DateTimeSelector/DateTimeSelector.js
@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { DatePicker } from 'antd';
 import moment from 'moment';
 import { type } from '@lowdefy/helpers';
@@ -34,6 +34,7 @@ const DateTimeSelector = ({
   validation,
   value,
 }) => {
+  const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
   const timeUnit = !type.isString(properties.timeFormat)
     ? 'minute'
     : properties.timeFormat === 'HH:mm:ss'
@@ -63,7 +64,7 @@ const DateTimeSelector = ({
       content={{
         content: () => (
           <div className={methods.makeCssClass({ width: '100%' })}>
-            <div id={`${blockId}_popup`} />
+            <div id={`${blockId}_${elementId}_popup`} />
             <DatePicker
               id={`${blockId}_input`}
               allowClear={properties.allowClear !== false}
@@ -73,7 +74,7 @@ const DateTimeSelector = ({
               disabled={properties.disabled || loading}
               disabledDate={disabledDate(properties.disabledDates)}
               format={properties.format ?? 'YYYY-MM-DD HH:mm'}
-              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
+              getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
               placeholder={properties.placeholder ?? 'Select Date & Time'}
               showNow={properties.showNow}
               showToday={properties.showToday}
diff --git a/packages/plugins/blocks/blocks-antd/src/blocks/MonthSelector/MonthSelector.js b/packages/plugins/blocks/blocks-antd/src/blocks/MonthSelector/MonthSelector.js
index 6dda5a301..cf34e42e9 100644
--- a/packages/plugins/blocks/blocks-antd/src/blocks/MonthSelector/MonthSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/MonthSelector/MonthSelector.js
@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { DatePicker } from 'antd';
 import moment from 'moment';
 import { blockDefaultProps } from '@lowdefy/block-utils';
@@ -36,6 +36,7 @@ const MonthSelector = ({
   validation,
   value,
 }) => {
+  const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
   return (
     <Label
       blockId={blockId}
@@ -47,7 +48,7 @@ const MonthSelector = ({
       content={{
         content: () => (
           <div className={methods.makeCssClass({ width: '100%' })}>
-            <div id={`${blockId}_popup`} />
+            <div id={`${blockId}_${elementId}_popup`} />
             <MonthPicker
               id={`${blockId}_input`}
               allowClear={properties.allowClear !== false}
@@ -57,7 +58,7 @@ const MonthSelector = ({
               disabled={properties.disabled || loading}
               disabledDate={disabledDate(properties.disabledDates)}
               format={properties.format ?? 'YYYY-MM'}
-              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
+              getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
               placeholder={properties.placeholder ?? 'Select Month'}
               size={properties.size}
               status={validation.status}
diff --git a/packages/plugins/blocks/blocks-antd/src/blocks/MultipleSelector/MultipleSelector.js b/packages/plugins/blocks/blocks-antd/src/blocks/MultipleSelector/MultipleSelector.js
index bc45e10da..8f8be167b 100644
--- a/packages/plugins/blocks/blocks-antd/src/blocks/MultipleSelector/MultipleSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/MultipleSelector/MultipleSelector.js
@@ -55,6 +55,7 @@ const MultipleSelector = ({
   value,
 }) => {
   const [fetchState, setFetch] = useState(false);
+  const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
   const uniqueValueOptions = getUniqueValues(properties.options ?? []);
   return (
     <Label
@@ -74,7 +75,7 @@ const MultipleSelector = ({
               bordered={properties.bordered}
               className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])}
               disabled={properties.disabled || loading}
-              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
+              getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
               mode="multiple"
               tagRender={
                 properties.renderTags &&
diff --git a/packages/plugins/blocks/blocks-antd/src/blocks/Popover/Popover.js b/packages/plugins/blocks/blocks-antd/src/blocks/Popover/Popover.js
index 6360f0fa8..310ed0bfc 100644
--- a/packages/plugins/blocks/blocks-antd/src/blocks/Popover/Popover.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/Popover/Popover.js
@@ -14,21 +14,22 @@
   limitations under the License.
 */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { blockDefaultProps } from '@lowdefy/block-utils';
 import { Popover } from 'antd';
 
 const PopoverBlock = ({ blockId, content, methods, properties }) => {
+  const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
   return (
     <Popover
       id={blockId}
       {...properties}
       content={content.popover && content.popover()}
       onOpenChange={() => methods.triggerEvent({ name: 'onOpenChange' })}
-      getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
+      getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
     >
       {content.content && content.content()}
-      <div id={`${blockId}_popup`} />
+      <div id={`${blockId}_${elementId}_popup`} />
     </Popover>
   );
 };
diff --git a/packages/plugins/blocks/blocks-antd/src/blocks/Selector/Selector.js b/packages/plugins/blocks/blocks-antd/src/blocks/Selector/Selector.js
index a56b6c6b0..d673b9648 100644
--- a/packages/plugins/blocks/blocks-antd/src/blocks/Selector/Selector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/Selector/Selector.js
@@ -37,6 +37,7 @@ const Selector = ({
   value,
 }) => {
   const [fetchState, setFetch] = useState(false);
+  const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
   const uniqueValueOptions = getUniqueValues(properties.options || []);
   return (
     <Label
@@ -49,14 +50,14 @@ const Selector = ({
       content={{
         content: () => (
           <div className={methods.makeCssClass({ width: '100%' })}>
-            <div id={`${blockId}_popup`} />
+            <div id={`${blockId}_${elementId}_popup`} />
             <Select
               id={`${blockId}_input`}
               bordered={properties.bordered}
               className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])}
               mode="single"
               autoFocus={properties.autoFocus}
-              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
+              getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
               disabled={properties.disabled || loading}
               placeholder={get(properties, 'placeholder', { default: 'Select item' })}
               status={validation.status}
diff --git a/packages/plugins/blocks/blocks-antd/src/blocks/WeekSelector/WeekSelector.js b/packages/plugins/blocks/blocks-antd/src/blocks/WeekSelector/WeekSelector.js
index 132ec7297..13eb8c972 100644
--- a/packages/plugins/blocks/blocks-antd/src/blocks/WeekSelector/WeekSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/WeekSelector/WeekSelector.js
@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { blockDefaultProps } from '@lowdefy/block-utils';
 import { DatePicker } from 'antd';
 import { type } from '@lowdefy/helpers';
@@ -36,6 +36,7 @@ const WeekSelector = ({
   validation,
   value,
 }) => {
+  const [elementId] = useState((0 | (Math.random() * 9e2)) + 1e2);
   return (
     <Label
       blockId={blockId}
@@ -47,7 +48,7 @@ const WeekSelector = ({
       content={{
         content: () => (
           <div className={methods.makeCssClass({ width: '100%' })}>
-            <div id={`${blockId}_popup`} />
+            <div id={`${blockId}_${elementId}_popup`} />
             <WeekPicker
               id={`${blockId}_input`}
               allowClear={properties.allowClear !== false}
@@ -57,7 +58,7 @@ const WeekSelector = ({
               disabled={properties.disabled || loading}
               disabledDate={disabledDate(properties.disabledDates)}
               format={properties.format ?? 'YYYY-wo'}
-              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
+              getPopupContainer={() => document.getElementById(`${blockId}_${elementId}_popup`)}
               placeholder={properties.placeholder ?? 'Select Week'}
               size={properties.size}
               status={validation.status}