fix autocomplete results box positioning

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
+        <div className="autocomplete-wrapper" ref={this.autocompleteRef}>
-          id="autocomplete-search"
+          <FluentUI.TextField
-          name="autocomplete-search"
+            id="autocomplete-search"
-          placeholder="Digita almeno 3 caratteri per cercare..."
+            name="autocomplete-search"
-          value={searchText}
+            placeholder="Digita almeno 3 caratteri per cercare..."
-          onChange={this.handleSearchChange}
+            value={searchText}
-          onKeyDown={this.handleKeyDown}
+            onChange={this.handleSearchChange}
-          className="isiportalPartialAdminFormFieldSingleLineText"
+            onKeyDown={this.handleKeyDown}
-          autoComplete="off"
+            className="isiportalPartialAdminFormFieldSingleLineText"
-        />
+            autoComplete="off"
+          />
 
-        {isLoading && (
+          {isLoading && (
-          <div className="autocomplete-dropdown">
+            <div className="autocomplete-dropdown">
-            <div className="autocomplete-loading">
+              <div className="autocomplete-loading">
-              <FluentUI.Spinner size={FluentUI.SpinnerSize.small} label="Ricerca in corso..." />
+                <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>
               </div>
-            ))}
+            </div>
-          </div>
+          )}
-        )}
 
-        {!isLoading && isDropdownOpen && searchResults.length === 0 && (
+          {!isLoading && isDropdownOpen && searchResults.length > 0 && (
-          <div className="autocomplete-dropdown">
+            <div className="autocomplete-dropdown">
-            <div className="autocomplete-no-results">Nessun risultato trovato</div>
+              {searchResults.map((contract, index) => (
-          </div>
+                <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 && (
+          {!isLoading && isDropdownOpen && searchResults.length === 0 && (
-          <div className="autocomplete-error">{errorMessage}</div>
+            <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(