From bb387d8759721e619d6fd6a98ae6dff30add5d7d Mon Sep 17 00:00:00 2001
From: Rohit <rohit.rajan031101@gmail.com>
Date: Mon, 23 Jun 2025 14:37:48 +0530
Subject: [PATCH] feat: dom rendering pickers

---
 src/components/pickers/DatePicker.tsx         | 46 +++++++++++++++
 .../pickers/DateTimeLocalPicker.tsx           | 50 ++++++++++++++++-
 src/components/pickers/Dropdown.tsx           | 56 +++++++++++++++++++
 3 files changed, 150 insertions(+), 2 deletions(-)

diff --git a/src/components/pickers/DatePicker.tsx b/src/components/pickers/DatePicker.tsx
index 00687115..ec4334e0 100644
--- a/src/components/pickers/DatePicker.tsx
+++ b/src/components/pickers/DatePicker.tsx
@@ -16,12 +16,58 @@ const DatePicker: React.FC<DatePickerProps> = ({ coordinates, selector, onClose
     setSelectedDate(e.target.value);
   };
 
+  const updateDOMElement = (selector: string, value: string) => {
+    try {
+      let iframeElement = document.querySelector('#dom-browser-iframe') as HTMLIFrameElement;
+      
+      if (!iframeElement) {
+        iframeElement = document.querySelector('#browser-window iframe') as HTMLIFrameElement;
+      }
+
+      if (!iframeElement) {
+        const browserWindow = document.querySelector('#browser-window');
+        if (browserWindow) {
+          iframeElement = browserWindow.querySelector('iframe') as HTMLIFrameElement;
+        }
+      }
+
+      if (!iframeElement) {
+        console.error('Could not find iframe element for DOM update');
+        return;
+      }
+
+      const iframeDoc = iframeElement.contentDocument;
+      if (!iframeDoc) {
+        console.error('Could not access iframe document');
+        return;
+      }
+
+      const element = iframeDoc.querySelector(selector) as HTMLInputElement;
+      if (element) {
+        element.value = value;
+        
+        const changeEvent = new Event('change', { bubbles: true });
+        element.dispatchEvent(changeEvent);
+        
+        const inputEvent = new Event('input', { bubbles: true });
+        element.dispatchEvent(inputEvent);        
+      } else {
+        console.warn(`Could not find element with selector: ${selector}`);
+      }
+    } catch (error) {
+      console.error('Error updating DOM element:', error);
+    }
+  };
+
   const handleConfirm = () => {
     if (socket && selectedDate) {
       socket.emit('input:date', {
         selector,
         value: selectedDate
       });
+      
+      updateDOMElement(selector, selectedDate);
+      
       onClose();
     }
   };
diff --git a/src/components/pickers/DateTimeLocalPicker.tsx b/src/components/pickers/DateTimeLocalPicker.tsx
index c51e3540..0cc952bc 100644
--- a/src/components/pickers/DateTimeLocalPicker.tsx
+++ b/src/components/pickers/DateTimeLocalPicker.tsx
@@ -16,12 +16,58 @@ const DateTimeLocalPicker: React.FC<DateTimeLocalPickerProps> = ({ coordinates,
     setSelectedDateTime(e.target.value);
   };
 
+  const updateDOMElement = (selector: string, value: string) => {
+    try {
+      let iframeElement = document.querySelector('#dom-browser-iframe') as HTMLIFrameElement;
+      
+      if (!iframeElement) {
+        iframeElement = document.querySelector('#browser-window iframe') as HTMLIFrameElement;
+      }
+
+      if (!iframeElement) {
+        const browserWindow = document.querySelector('#browser-window');
+        if (browserWindow) {
+          iframeElement = browserWindow.querySelector('iframe') as HTMLIFrameElement;
+        }
+      }
+
+      if (!iframeElement) {
+        console.error('Could not find iframe element for DOM update');
+        return;
+      }
+
+      const iframeDoc = iframeElement.contentDocument;
+      if (!iframeDoc) {
+        console.error('Could not access iframe document');
+        return;
+      }
+
+      const element = iframeDoc.querySelector(selector) as HTMLInputElement;
+      if (element) {
+        element.value = value;
+        
+        const changeEvent = new Event('change', { bubbles: true });
+        element.dispatchEvent(changeEvent);
+        
+        const inputEvent = new Event('input', { bubbles: true });
+        element.dispatchEvent(inputEvent);        
+      } else {
+        console.warn(`Could not find element with selector: ${selector}`);
+      }
+    } catch (error) {
+      console.error('Error updating DOM element:', error);
+    }
+  };
+
   const handleConfirm = () => {
     if (socket && selectedDateTime) {
       socket.emit('input:datetime-local', {
         selector,
         value: selectedDateTime
       });
+      
+      updateDOMElement(selector, selectedDateTime);
+      
       onClose();
     }
   };
@@ -58,8 +104,8 @@ const DateTimeLocalPicker: React.FC<DateTimeLocalPickerProps> = ({ coordinates,
             onClick={handleConfirm}
             disabled={!selectedDateTime}
             className={`px-3 py-1 text-sm rounded ${selectedDateTime
-                ? 'bg-blue-500 text-white hover:bg-blue-600'
-                : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+              ? 'bg-blue-500 text-white hover:bg-blue-600'
+              : 'bg-gray-300 text-gray-500 cursor-not-allowed'
               }`}
           >
             Confirm
diff --git a/src/components/pickers/Dropdown.tsx b/src/components/pickers/Dropdown.tsx
index df695efa..743d721e 100644
--- a/src/components/pickers/Dropdown.tsx
+++ b/src/components/pickers/Dropdown.tsx
@@ -18,9 +18,65 @@ const Dropdown = ({ coordinates, selector, options, onClose }: DropdownProps) =>
     const { socket } = useSocketStore();
     const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
 
+    const updateDOMElement = (selector: string, value: string) => {
+        try {
+            let iframeElement = document.querySelector('#dom-browser-iframe') as HTMLIFrameElement;
+            
+            if (!iframeElement) {
+                iframeElement = document.querySelector('#browser-window iframe') as HTMLIFrameElement;
+            }
+
+            if (!iframeElement) {
+                const browserWindow = document.querySelector('#browser-window');
+                if (browserWindow) {
+                    iframeElement = browserWindow.querySelector('iframe') as HTMLIFrameElement;
+                }
+            }
+
+            if (!iframeElement) {
+                console.error('Could not find iframe element for DOM update');
+                return;
+            }
+
+            const iframeDoc = iframeElement.contentDocument;
+            if (!iframeDoc) {
+                console.error('Could not access iframe document');
+                return;
+            }
+
+            const selectElement = iframeDoc.querySelector(selector) as HTMLSelectElement;
+            if (selectElement) {
+                selectElement.value = value;
+                
+                const optionElements = selectElement.querySelectorAll('option');
+                optionElements.forEach(option => {
+                    if (option.value === value) {
+                        option.selected = true;
+                        option.setAttribute('selected', 'selected');
+                    } else {
+                        option.selected = false;
+                        option.removeAttribute('selected');
+                    }
+                });
+                
+                const changeEvent = new Event('change', { bubbles: true });
+                selectElement.dispatchEvent(changeEvent);
+                
+                const inputEvent = new Event('input', { bubbles: true });
+                selectElement.dispatchEvent(inputEvent);
+            } else {
+                console.warn(`Could not find select element with selector: ${selector}`);
+            }
+        } catch (error) {
+            console.error('Error updating DOM select element:', error);
+        }
+    };
+
     const handleSelect = (value: string) => {
         if (socket) {
             socket.emit('input:dropdown', { selector, value });
+            
+            updateDOMElement(selector, value);
         }
         onClose();
     };