fix form state for dropdown controls

minor cleanups

.agents/AGENTS.md

@@ -0,0 +1,4 @@
+# Regole e Convenzioni del Progetto elixForms Custom Pages
+
+## Gestione ID dei form element
+Gli ID dei campi del form (es. nel Dropdown, Checkbox, TextField) che vengono creati con i vari metodi `create...` in `ElixFormsComponentAbstract.tsx` non devono mai essere cambiati o manipolati (es. aggiungendo suffissi come `_dropdown`), poiché vengono ricevuti e inviati da una pagina iniziale che si basa strettamente sul loro nome e ID esatto. In caso di conflitti di ID (es. dovuti a input nascosti), il suffisso va applicato agli altri elementi (come l'input hidden) e MAI all'elemento principale visibile.

react/common/src/ElixFormsComponentAbstract.tsx

@@ -113,7 +113,11 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     return this.createCustomFormFields(formFieldFactory);
   }
 
-  protected renderExtraContent(): JSX.Element | null {
+  protected renderExtraContentPre(): JSX.Element | null {
+    return null;
+  }
+
+  protected renderExtraContentPost(): JSX.Element | null {
     return null;
   }
 
@@ -176,6 +180,8 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
                     {environmentMessage && <div>{environmentMessage}</div>}
                     {description && <div>{description}</div>}
 
+                    {this.renderExtraContentPre()}
+
                     <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1">
                       {this.createMandatoryFormFields(queryParams)}
                       {this.createAdditionalFormFields()}
@@ -183,7 +189,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
                       <input type="submit" value="Submit" />
                     </form>
 
-                    {this.renderExtraContent()}
+                    {this.renderExtraContentPost()}
                   </div>
                 </div>
               </div>
@@ -234,21 +240,25 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
             } else if (!checked && checkboxIndex !== -1) {
               currentCheckboxValues.splice(checkboxIndex, 1);
             }
-            this.state.formData[paramName] = currentCheckboxValues.join(',').trim() ?? '';
-            //this.setState({ formData: { ...this.state.formData, [paramName]: currentCheckboxValues.join(',').trim() ?? '' } }, () =>
+            const newValue = currentCheckboxValues.join(',').trim();
+            this.setState({ formData: { ...this.state.formData, [paramName]: newValue } }, () => {
               console.log(`Checkbox ${id} changed to ${checked}. Current values for ${paramName}: ${this.state.formData[paramName]}`);
-            //);
+            });
           }}
         />
       );
     });
 
+    const currentValue = this.state.formData[paramName] !== undefined
+                           ? this.state.formData[paramName]
+                           : (this.checkboxValues.get(paramName)?.join(',').trim() ?? '');
+
     return new ElixFormsElement(
       <><FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label></>,
       <><FluentUI.Stack tokens={stackTokens}>
         {checkboxes}
       </FluentUI.Stack>
-      <input type='hidden' id={paramName} name={paramName} value={this.state.formData[paramName] ?? ''} />
+        <input type='hidden' id={paramName} name={paramName} value={currentValue} />
       </>
     ).render();
   }
@@ -373,14 +383,17 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
   }
 
   private createDropdownInput(paramName: string, label: string, values: Array<ElixFormsDropdownOption>, required: boolean = false): JSX.Element {
-    const selectedValue = QueryParamHelper.getOptionFromQuery(paramName);
+    const queryValue = QueryParamHelper.getOptionFromQuery(paramName);
+    const currentValue = this.state.formData[paramName] !== undefined 
+                           ? this.state.formData[paramName] 
+                           : (queryValue?.toString() ?? '');
+
     const options: FluentUI.IDropdownOption[] = [];
 
     values.forEach(entry => {
-      const id = `${paramName}_${entry.value}`;
       options.push(
         {
-          key: id,
+          key: entry.value.toString(),
           text: entry.label
         }
       );
@@ -388,19 +401,25 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
 
     return new ElixFormsElement(
       <FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
+      <>
         <FluentUI.Dropdown
           id={paramName}
           options={options}
-        selectedKey={selectedValue?.toString()}
+          selectedKey={currentValue}
           placeholder='---'
           required={required}
           className='isiportalPartialAdminFormFieldSelect'
-        onChange={(event, value) => {
+          onChange={(event, option) => {
+            if (option) {
+              const value = option.key.toString();
               this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
                 console.log(`Dropdown ${paramName} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
               );
+            }
           }}
         />
+        <input type="hidden" name={paramName} id={paramName + '_hidden'} value={currentValue} />
+      </>
     ).render();
   }
 

react/common/src/IElixFormsComponentProperties.ts

@@ -10,7 +10,7 @@ export interface IElixFormsComponentProperties {
   additionalFieldsJson?: string;
 
   // Layout Properties
-  moduleTitle?: string;
+  headerTitle?: string;
   pageTitle?: string;
   pageDescription?: string;
   heroImageSrc?: string;

react/scelta-carriera/src/SceltaCarrieraComponent.tsx

@@ -43,7 +43,7 @@ export default class SceltaCarrieraComponent extends ElixFormsComponentAbstract
     );
   }
 
-  protected override renderExtraContent(): JSX.Element {
+  protected override renderExtraContentPost(): JSX.Element {
     return <p>Altre cose</p>;
   }
 }