feat: enhance form components with autoComplete attributes and update ResidenzaSection to set cap_recapiti based on selected comune

apps/infoalloggi/src/components/custom_ui/multiselect.tsx

@@ -1,12 +1,29 @@
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { type JSX, useRef, useState } from "react";
+import {
+	type HTMLInputAutoCompleteAttribute,
+	type JSX,
+	useRef,
+	useState,
+} from "react";
 import ReactSelect, {
 	type CSSObjectWithLabel,
+	components,
 	type GroupBase,
+	type InputProps,
 	type MenuListProps,
 } from "react-select";
+import type {} from "react-select/base";
 import { cn } from "~/lib/utils";
 
+declare module "react-select/base" {
+	export interface Props<
+		Option,
+		IsMulti extends boolean,
+		Group extends GroupBase<Option>,
+	> {
+		autoComplete?: HTMLInputAutoCompleteAttribute;
+	}
+}
 export type ListOption = {
 	label: string;
 	value: string;
@@ -20,6 +37,7 @@ type BaseProps = {
 	disabled?: boolean;
 	menuPlacement?: "auto" | "bottom" | "top";
 	defaultValue?: ListOption | ListOption[];
+	autoComplete?: HTMLInputAutoCompleteAttribute;
 };
 
 type MultiProps = {
@@ -94,6 +112,18 @@ const VirtualizedMenuList = (
 	);
 };
 
+const CustomInput = (
+	props: InputProps<ListOption, boolean, GroupBase<ListOption>>,
+) => {
+	return (
+		<components.Input
+			{...props}
+			// This pulls the value from the main ReactSelect wrapper
+
+			autoComplete={props.selectProps.autoComplete}
+		/>
+	);
+};
 /**
  *
  * @example
@@ -124,11 +154,13 @@ export const MultiSelect = ({
 	placeholder,
 	disabled,
 	menuPlacement,
+	autoComplete,
 }: MultiSelectProps) => {
 	const [menuOpen, setMenuOpen] = useState(false);
 
 	return (
 		<ReactSelect
+			autoComplete={autoComplete}
 			classNamePrefix="select"
 			classNames={{
 				control: () =>
@@ -161,7 +193,10 @@ export const MultiSelect = ({
 				singleValue: () => cn("text-primary font-medium"),
 				valueContainer: () => cn("min-h-[36px]"),
 			}}
-			components={{ MenuList: VirtualizedMenuList }}
+			components={{
+				MenuList: VirtualizedMenuList,
+				Input: CustomInput,
+			}}
 			defaultValue={defaultValue}
 			inputId={elementId}
 			instanceId={elementId}

apps/infoalloggi/src/forms/FormProfilo_Account.tsx

@@ -104,7 +104,12 @@ export const ProfileFormAccount = ({
 										</div>
 
 										<FormControl>
-											<Input placeholder="" {...field} id="nome" />
+											<Input
+												placeholder=""
+												{...field}
+												autoComplete="off"
+												id="nome"
+											/>
 										</FormControl>
 									</FormItem>
 								)}
@@ -124,7 +129,12 @@ export const ProfileFormAccount = ({
 										</div>
 
 										<FormControl>
-											<Input placeholder="" {...field} id="cognome" />
+											<Input
+												placeholder=""
+												{...field}
+												autoComplete="off"
+												id="cognome"
+											/>
 										</FormControl>
 									</FormItem>
 								)}
@@ -145,6 +155,7 @@ export const ProfileFormAccount = ({
 
 										<FormControl>
 											<Input
+												autoComplete="off"
 												placeholder="esempio@email.com"
 												{...field}
 												id="email"
@@ -168,7 +179,7 @@ export const ProfileFormAccount = ({
 										</div>
 
 										<FormControl>
-											<PhoneInput {...field} id="telefono" />
+											<PhoneInput {...field} autoComplete="off" id="telefono" />
 										</FormControl>
 									</FormItem>
 								)}
@@ -188,6 +199,7 @@ export const ProfileFormAccount = ({
 												className="data-[state=checked]:bg-neutral-700"
 												defaultChecked={field.value}
 												id="isAdmin"
+												name="isAdmin"
 												onCheckedChange={(v) => {
 													field.onChange(v);
 												}}

apps/infoalloggi/src/forms/FormProfilo_Anagrafica.tsx

@@ -571,7 +571,7 @@ const ResidenzaSection = ({
 							return (
 								<FormItem className="w-full">
 									<div className="flex flex-wrap items-center gap-x-2">
-										<FormLabel htmlFor="select-comune">
+										<FormLabel htmlFor="select-comune-residenza">
 											{t.recapiti.comune}
 										</FormLabel>
 										<FormMessage />
@@ -587,7 +587,7 @@ const ResidenzaSection = ({
 														}
 													: undefined
 											}
-											elementId="select-comune"
+											elementId="select-comune-residenza"
 											elementName="comune_residenza"
 											isMulti={false}
 											onValueChange={async (value) => {

apps/infoalloggi/src/forms/FormServizioAcquisto.tsx

@@ -867,7 +867,12 @@ export const FormServizioAcquisto = ({
 										</div>
 
 										<FormControl>
-											<Input {...field} id="nome" type="text" />
+											<Input
+												{...field}
+												autoComplete="name"
+												id="nome"
+												type="text"
+											/>
 										</FormControl>
 									</FormItem>
 								)}
@@ -885,7 +890,12 @@ export const FormServizioAcquisto = ({
 										</div>
 
 										<FormControl>
-											<Input {...field} id="cognome" type="text" />
+											<Input
+												{...field}
+												autoComplete="family-name"
+												id="cognome"
+												type="text"
+											/>
 										</FormControl>
 									</FormItem>
 								)}
@@ -1368,6 +1378,7 @@ const ResidenzaSection = ({
 									<FormControl>
 										<Input
 											{...field}
+											autoComplete=""
 											id="provinciaRecapiti"
 											onChange={(e) =>
 												NullableStringOnChange(e, field.onChange)
@@ -1426,6 +1437,12 @@ const ResidenzaSection = ({
 											onValueChange={async (value) => {
 												field.onChange(value.value);
 												await trigger("citta_recapiti");
+												const selectedComune = comuni.find(
+													(c) => c.catasto === value.value,
+												);
+												if (selectedComune?.cap) {
+													setValue("cap_recapiti", selectedComune.cap);
+												}
 											}}
 											options={options}
 											placeholder="Seleziona..."
@@ -1445,6 +1462,7 @@ const ResidenzaSection = ({
 								<FormControl>
 									<Input
 										{...field}
+										autoComplete=""
 										id="citta_recapiti"
 										onChange={async (e) => {
 											NullableStringOnChange(e, field.onChange);
@@ -1469,7 +1487,13 @@ const ResidenzaSection = ({
 								<FormMessage />
 							</div>
 							<FormControl>
-								<Input {...field} id="cap" placeholder="00100" type="text" />
+								<Input
+									{...field}
+									autoComplete="postal-code"
+									id="cap"
+									placeholder="00100"
+									type="text"
+								/>
 							</FormControl>
 						</FormItem>
 					)}