Uniforma l'altezza dei <select> agli altri campi dei form su Android.
Su Android il controllo nativo di <select> ignora parte del padding di classiInput e risultava più alto o più basso degli input accanto. appearance-none lo riporta a una scatola CSS normale; la freccia va ridisegnata a mano perché appearance-none la fa sparire. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,7 +3,7 @@ import { Link } from "@tanstack/react-router";
|
||||
import { Check, Eye, Loader2, Upload } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Campo, classiInput, SezioneTendina } from "@/components/crapp/ui-bits";
|
||||
import { Campo, classiInput, Select, SezioneTendina } from "@/components/crapp/ui-bits";
|
||||
import { Reveal } from "@/components/motion/Reveal";
|
||||
import {
|
||||
caricaFile,
|
||||
@@ -180,10 +180,9 @@ export function CampiProfilo({
|
||||
<Intestazione titolo="Documento di identità" completa={sezioni.documento} />
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Campo label="Tipo">
|
||||
<select
|
||||
<Select
|
||||
value={corrente.documentoTipo ?? ""}
|
||||
onChange={(e) => aggiorna({ documentoTipo: e.target.value })}
|
||||
className={classiInput}
|
||||
>
|
||||
<option value="">—</option>
|
||||
{TIPI_DOCUMENTO.map((t) => (
|
||||
@@ -191,7 +190,7 @@ export function CampiProfilo({
|
||||
{t}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Select>
|
||||
</Campo>
|
||||
<Campo label="Numero">
|
||||
<input
|
||||
|
||||
@@ -177,6 +177,22 @@ export function Campo({ label, children }: { label: string; children: ReactNode
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* `<select>` nativo con la stessa altezza degli altri campi del form. Il
|
||||
* controllo nativo di un `<select>` ignora parzialmente il padding di
|
||||
* `classiInput` (soprattutto su Android), risultando più alto o più basso
|
||||
* degli input accanto: `appearance-none` lo riporta a una scatola CSS
|
||||
* normale, la freccia va poi ridisegnata a mano perché sparisce con lui.
|
||||
*/
|
||||
export function Select(props: ComponentPropsWithoutRef<"select">) {
|
||||
return (
|
||||
<span className="relative block">
|
||||
<select {...props} className={cn(classiInput, "appearance-none pr-8", props.className)} />
|
||||
<ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatoBadge({ stato, className }: { stato: Stato; className?: string }) {
|
||||
const meta = statoMeta[stato];
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user