From e404bf095477565ddfe1c353cc62b0657c8b718b Mon Sep 17 00:00:00 2001
From: Pier-Paolo Mammi <pierpaolo.mammi@unipr.it>
Date: Thu, 16 Jul 2026 15:36:14 +0200
Subject: [PATCH] fix autocomplete results box positioning

---
 ...ecuperoPropostaCctDaContrattiComponent.tsx | 98 ++++++++++---------
 1 file changed, 50 insertions(+), 48 deletions(-)

diff --git a/react/recupero-proposta-cct-da-contratti/src/RecuperoPropostaCctDaContrattiComponent.tsx b/react/recupero-proposta-cct-da-contratti/src/RecuperoPropostaCctDaContrattiComponent.tsx
index 33a998b..dfce7da 100644
--- a/react/recupero-proposta-cct-da-contratti/src/RecuperoPropostaCctDaContrattiComponent.tsx
+++ b/react/recupero-proposta-cct-da-contratti/src/RecuperoPropostaCctDaContrattiComponent.tsx
@@ -251,57 +251,59 @@ export default class RecuperoPropostaCctDaContrattiComponent extends ElixFormsCo
     const { searchResults, isLoading, isDropdownOpen, highlightedIndex, errorMessage, searchText } = this.autocompleteState;
 
     const autocompleteInput = (
-      <div className="autocomplete-wrapper" ref={this.autocompleteRef}>
-        <FluentUI.TextField
-          id="autocomplete-search"
-          name="autocomplete-search"
-          placeholder="Digita almeno 3 caratteri per cercare..."
-          value={searchText}
-          onChange={this.handleSearchChange}
-          onKeyDown={this.handleKeyDown}
-          className="isiportalPartialAdminFormFieldSingleLineText"
-          autoComplete="off"
-        />
+      <>
+        <div className="autocomplete-wrapper" ref={this.autocompleteRef}>
+          <FluentUI.TextField
+            id="autocomplete-search"
+            name="autocomplete-search"
+            placeholder="Digita almeno 3 caratteri per cercare..."
+            value={searchText}
+            onChange={this.handleSearchChange}
+            onKeyDown={this.handleKeyDown}
+            className="isiportalPartialAdminFormFieldSingleLineText"
+            autoComplete="off"
+          />
 
-        {isLoading && (
-          <div className="autocomplete-dropdown">
-            <div className="autocomplete-loading">
-              <FluentUI.Spinner size={FluentUI.SpinnerSize.small} label="Ricerca in corso..." />
-            </div>
-          </div>
-        )}
-
-        {!isLoading && isDropdownOpen && searchResults.length > 0 && (
-          <div className="autocomplete-dropdown">
-            {searchResults.map((contract, index) => (
-              <div
-                key={`${contract.idContratto}_${index}`}
-                className={`autocomplete-dropdown-item${index === highlightedIndex ? ' highlighted' : ''}`}
-                onMouseDown={(e) => {
-                  e.preventDefault(); // Previene blur del TextField
-                  this.selectContract(contract);
-                }}
-                onMouseEnter={() => {
-                  this.autocompleteState.highlightedIndex = index;
-                  this.forceUpdate();
-                }}
-              >
-                <span className="contract-id">[{contract.idContratto}]</span>{' '}
-                <span className="contract-title">{contract.titoloContratto}</span>
+          {isLoading && (
+            <div className="autocomplete-dropdown">
+              <div className="autocomplete-loading">
+                <FluentUI.Spinner size={FluentUI.SpinnerSize.small} label="Ricerca in corso..." />
               </div>
-            ))}
-          </div>
-        )}
+            </div>
+          )}
 
-        {!isLoading && isDropdownOpen && searchResults.length === 0 && (
-          <div className="autocomplete-dropdown">
-            <div className="autocomplete-no-results">Nessun risultato trovato</div>
-          </div>
-        )}
+          {!isLoading && isDropdownOpen && searchResults.length > 0 && (
+            <div className="autocomplete-dropdown">
+              {searchResults.map((contract, index) => (
+                <div
+                  key={`${contract.idContratto}_${index}`}
+                  className={`autocomplete-dropdown-item${index === highlightedIndex ? ' highlighted' : ''}`}
+                  onMouseDown={(e) => {
+                    e.preventDefault(); // Previene blur del TextField
+                    this.selectContract(contract);
+                  }}
+                  onMouseEnter={() => {
+                    this.autocompleteState.highlightedIndex = index;
+                    this.forceUpdate();
+                  }}
+                >
+                  <span className="contract-id">[{contract.idContratto}]</span>{' '}
+                  <span className="contract-title">{contract.titoloContratto}</span>
+                </div>
+              ))}
+            </div>
+          )}
 
-        {errorMessage && (
-          <div className="autocomplete-error">{errorMessage}</div>
-        )}
+          {!isLoading && isDropdownOpen && searchResults.length === 0 && (
+            <div className="autocomplete-dropdown">
+              <div className="autocomplete-no-results">Nessun risultato trovato</div>
+            </div>
+          )}
+
+          {errorMessage && (
+            <div className="autocomplete-error">{errorMessage}</div>
+          )}
+        </div>
 
         {this.autocompleteState.selectedContract && (
           <div className="selected-contract-summary">
@@ -323,7 +325,7 @@ export default class RecuperoPropostaCctDaContrattiComponent extends ElixFormsCo
             </div>
           </div>
         )}
-      </div>
+      </>
     );
 
     return new ElixFormsElement(