fix(properties-panel): improve element detection timing and value handling in properties panel

readme.hints.md

@@ -25,9 +25,11 @@ The properties panel had timing issues detecting rendered elements because:
 
 ### Code Flow
 1. Dashboard renders element demo into viewport using `render(anonItem.demo(), viewport)`
-2. Properties panel waits, then searches recursively for the element instance
+2. Properties panel waits 200ms for demo wrappers to run and set initial values
-3. If not found, retries with delays to handle async rendering
+3. Searches recursively for the element instance
-4. Once found, extracts and displays element properties
+4. If not found, retries with delays to handle async rendering
+5. Once found, extracts and displays element properties
+6. Uses property binding (`.value=`) instead of attribute binding to prevent input events during initialization
 
 ## Demo Tools
 

readme.plan.md

@@ -85,4 +85,16 @@ These test various scenarios:
 - Complex data type display and editing
 - Element detection inside dees-demowrapper
 - Error handling for problematic values
-- Deep nesting and shadow DOM traversal
+- Deep nesting and shadow DOM traversal
+
+# Fixed Demo Value Overwriting (COMPLETED)
+
+## Issue:
+Properties panel was overwriting values set by demo functions
+
+## Solution:
+1. Changed from attribute binding (`value=`) to property binding (`.value=`)
+2. This prevents browser from firing input events during initialization
+3. Added proper number parsing for number inputs
+4. Increased initial wait to 200ms for demo wrappers to complete
+5. Simplified select element handling to use property binding

ts_web/elements/wcc-properties.ts

@@ -309,8 +309,8 @@ export class WccProperties extends DeesElement {
       console.log(anonItem.elementProperties);
       const wccFrame = await this.dashboardRef.wccFrame;
       
-      // Wait for render to complete
+      // Wait for render to complete and any demo wrappers to run
-      await new Promise(resolve => setTimeout(resolve, 100));
+      await new Promise(resolve => setTimeout(resolve, 200));
       
       // Try to find the element with recursive search
       const viewport = await wccFrame.getViewportElement();
@@ -370,7 +370,7 @@ export class WccProperties extends DeesElement {
                   case 'String':
                     return html`<input
                       type="text"
-                      value=${firstFoundInstantiatedElement[key]}
+                      .value=${firstFoundInstantiatedElement[key] || ''}
                       @input="${(eventArg: any) => {
                         firstFoundInstantiatedElement[key] = eventArg.target.value;
                       }}"
@@ -378,14 +378,15 @@ export class WccProperties extends DeesElement {
                   case 'Number':
                     return html`<input
                       type="number"
-                      value=${firstFoundInstantiatedElement[key]}
+                      .value=${firstFoundInstantiatedElement[key] ?? ''}
                       @input="${(eventArg: any) => {
-                        firstFoundInstantiatedElement[key] = eventArg.target.value;
+                        firstFoundInstantiatedElement[key] = parseFloat(eventArg.target.value) || 0;
                       }}"
                     />`;
                   case 'Enum':
                     const enumValues: any[] = getEnumValues(property);
                     return html`<select
+                      .value=${firstFoundInstantiatedElement[key] || ''}
                       @change="${(eventArg: any) => {
                         firstFoundInstantiatedElement[key] = eventArg.target.value;
                       }}"
@@ -393,8 +394,7 @@ export class WccProperties extends DeesElement {
                       ${enumValues.map((valueArg) => {
                         return html`
                           <option
-                            ?selected=${valueArg === firstFoundInstantiatedElement[key] ? true : false}
+                            value="${valueArg}"
-                            name="${valueArg}"
                           >
                             ${valueArg}
                           </option>