Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

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

Browse source
This commit is contained in:
Marco Pedone 2026-03-20 18:40:48 +01:00
parent 7c49ca8f66
commit 48768c0481
4 changed files with 81 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
apps/infoalloggi/src/components/custom_ui/multiselect.tsx
View file

@ -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}

18
apps/infoalloggi/src/forms/FormProfilo_Account.tsx
View file

@ -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);
}}

4
apps/infoalloggi/src/forms/FormProfilo_Anagrafica.tsx
View file

@ -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) => {

30
apps/infoalloggi/src/forms/FormServizioAcquisto.tsx
View file

@ -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>
)}