From 132fdda83d10ef20164641abacfa26281065cbbd Mon Sep 17 00:00:00 2001
From: Horacio Gouveia <horacio.gouveia@devo.com>
Date: Tue, 19 Mar 2024 17:07:13 +0100
Subject: [PATCH] fix: stopPorpagation on RT button

---
 .../DateTimeRangeControl.tsx                  | 10 +++++++-
 .../DateTimeRangePicker.stories.tsx           | 24 +++++++++++++++++++
 .../DateTimeRangePicker.tsx                   |  1 +
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/datetime/src/components/DateTimeRangeControl/DateTimeRangeControl.tsx b/packages/datetime/src/components/DateTimeRangeControl/DateTimeRangeControl.tsx
index 33fc61ead..ecf30b84c 100644
--- a/packages/datetime/src/components/DateTimeRangeControl/DateTimeRangeControl.tsx
+++ b/packages/datetime/src/components/DateTimeRangeControl/DateTimeRangeControl.tsx
@@ -145,6 +145,14 @@ export const DateTimeRangeControl: React.FC<DateTimeRangeControlProps> = ({
     [from, onChange],
   );
 
+  const onClickRTCallback = React.useCallback(
+    (event) => {
+      event.stopPropagation();
+      onRealTimeClick(event);
+    },
+    [onRealTimeClick],
+  );
+
   const theme = useTheme();
 
   return (
@@ -233,7 +241,7 @@ export const DateTimeRangeControl: React.FC<DateTimeRangeControlProps> = ({
       </Field>
       {hasRealTime(realTime) && (
         <RealTimeButton
-          onClick={onRealTimeClick}
+          onClick={onClickRTCallback}
           state={realTime}
           size={REAL_TIME_SIZE_MAP[size]}
         />
diff --git a/packages/datetime/src/components/DateTimeRangePicker/DateTimeRangePicker.stories.tsx b/packages/datetime/src/components/DateTimeRangePicker/DateTimeRangePicker.stories.tsx
index 66ef295a8..1df9d1c8e 100644
--- a/packages/datetime/src/components/DateTimeRangePicker/DateTimeRangePicker.stories.tsx
+++ b/packages/datetime/src/components/DateTimeRangePicker/DateTimeRangePicker.stories.tsx
@@ -33,6 +33,30 @@ export const Base: Story = {
           value={date}
           onApply={onApply(setDate)}
           onChange={onChange(setDate)}
+          onRealTimeClick={(event) => {
+            console.log('He pisado RT', event);
+          }}
+          presets={[
+            {
+              label: 'Relative too',
+              options: [
+                {
+                  value: {
+                    from: 'now() - 30s',
+                    to: 'now()',
+                  },
+                  label: 'Last 30 seconds',
+                },
+                {
+                  value: {
+                    from: 'now() - 1m',
+                    to: 'now()',
+                  },
+                  label: 'Last minute',
+                },
+              ],
+            },
+          ]}
         />
       );
     })(args),
diff --git a/packages/datetime/src/components/DateTimeRangePicker/DateTimeRangePicker.tsx b/packages/datetime/src/components/DateTimeRangePicker/DateTimeRangePicker.tsx
index f46ba69d7..324b28e36 100644
--- a/packages/datetime/src/components/DateTimeRangePicker/DateTimeRangePicker.tsx
+++ b/packages/datetime/src/components/DateTimeRangePicker/DateTimeRangePicker.tsx
@@ -55,6 +55,7 @@ export interface DateTimeRangePickerProps
       | 'statusTo'
       | 'onChange'
       | 'onBlur'
+      | 'onRealTimeClick'
       | 'wide'
     >,
     Required<Pick<GlobalAttrProps, 'id'>>,