dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): set explicit width for product search dropdown in order form

Browse Source 
Prevents the search dropdown from shrinking or overflowing unpredictably
in the flex container. Also ensures better alignment.
This commit is contained in:
Dwindi Ramadhana
2026-01-07 23:34:48 +07:00
parent 5170aea882
commit a52f5fc707
1 changed files with 66 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
admin-spa/src/routes/Orders/partials/OrderForm.tsx
View File

@@ -113,7 +113,7 @@ type Props = {
hideSubmitButton?: boolean; hideSubmitButton?: boolean;
}; };
const STATUS_LIST = ['pending','processing','on-hold','completed','cancelled','refunded','failed']; const STATUS_LIST = ['pending', 'processing', 'on-hold', 'completed', 'cancelled', 'refunded', 'failed'];
// --- Component -------------------------------------------------------- // --- Component --------------------------------------------------------
export default function OrderForm({ export default function OrderForm({
@@ -167,11 +167,11 @@ export default function OrderForm({
const only = countries[0]?.code || ''; const only = countries[0]?.code || '';
if (shipDiff) { if (shipDiff) {
if (only && shippingData.country !== only) { if (only && shippingData.country !== only) {
setShippingData({...shippingData, country: only}); setShippingData({ ...shippingData, country: only });
} }
} else { } else {
// keep shipping synced to billing when not different // keep shipping synced to billing when not different
setShippingData({...shippingData, country: bCountry}); setShippingData({ ...shippingData, country: bCountry });
} }
} }
}, [oneCountryOnly, countries, shipDiff, bCountry, shippingData.country]); }, [oneCountryOnly, countries, shipDiff, bCountry, shippingData.country]);
@@ -408,7 +408,7 @@ export default function OrderForm({
// Keep shipping country synced to billing when unchecked // Keep shipping country synced to billing when unchecked
React.useEffect(() => { React.useEffect(() => {
if (!shipDiff) setShippingData({...shippingData, country: bCountry}); if (!shipDiff) setShippingData({ ...shippingData, country: bCountry });
}, [shipDiff, bCountry]); }, [shipDiff, bCountry]);
// Clamp states when country changes // Clamp states when country changes
@@ -417,7 +417,7 @@ export default function OrderForm({
}, [bCountry]); }, [bCountry]);
React.useEffect(() => { React.useEffect(() => {
if (shippingData.state && !states[shippingData.country]?.[shippingData.state]) { if (shippingData.state && !states[shippingData.country]?.[shippingData.state]) {
setShippingData({...shippingData, state: ''}); setShippingData({ ...shippingData, state: '' });
} }
}, [shippingData.country]); }, [shippingData.country]);
@@ -530,6 +530,7 @@ export default function OrderForm({
onSearch={setSearchQ} onSearch={setSearchQ}
disabled={!itemsEditable} disabled={!itemsEditable}
showCheckIndicator={false} showCheckIndicator={false}
className="w-[200px] md:w-[300px]"
/> />
</div> </div>
) : ( ) : (
@@ -1063,11 +1064,11 @@ export default function OrderForm({
<div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div> <div>
<Label>{__('First name')}</Label> <Label>{__('First name')}</Label>
<Input className="rounded-md border px-3 py-2" value={bFirst} onChange={e=>setBFirst(e.target.value)} /> <Input className="rounded-md border px-3 py-2" value={bFirst} onChange={e => setBFirst(e.target.value)} />
</div> </div>
<div> <div>
<Label>{__('Last name')}</Label> <Label>{__('Last name')}</Label>
<Input className="rounded-md border px-3 py-2" value={bLast} onChange={e=>setBLast(e.target.value)} /> <Input className="rounded-md border px-3 py-2" value={bLast} onChange={e => setBLast(e.target.value)} />
</div> </div>
<div> <div>
<Label>{__('Email')}</Label> <Label>{__('Email')}</Label>
@@ -1076,27 +1077,27 @@ export default function OrderForm({
autoComplete="email" autoComplete="email"
className="rounded-md border px-3 py-2 appearance-none" className="rounded-md border px-3 py-2 appearance-none"
value={bEmail} value={bEmail}
onChange={e=>setBEmail(e.target.value)} onChange={e => setBEmail(e.target.value)}
/> />
</div> </div>
<div> <div>
<Label>{__('Phone')}</Label> <Label>{__('Phone')}</Label>
<Input className="rounded-md border px-3 py-2" value={bPhone} onChange={e=>setBPhone(e.target.value)} /> <Input className="rounded-md border px-3 py-2" value={bPhone} onChange={e => setBPhone(e.target.value)} />
</div> </div>
{/* Only show full address fields for physical products */} {/* Only show full address fields for physical products */}
{hasPhysicalProduct && ( {hasPhysicalProduct && (
<> <>
<div className="md:col-span-2"> <div className="md:col-span-2">
<Label>{__('Address')}</Label> <Label>{__('Address')}</Label>
<Input className="rounded-md border px-3 py-2" value={bAddr1} onChange={e=>setBAddr1(e.target.value)} /> <Input className="rounded-md border px-3 py-2" value={bAddr1} onChange={e => setBAddr1(e.target.value)} />
</div> </div>
<div> <div>
<Label>{__('City')}</Label> <Label>{__('City')}</Label>
<Input className="rounded-md border px-3 py-2" value={bCity} onChange={e=>setBCity(e.target.value)} /> <Input className="rounded-md border px-3 py-2" value={bCity} onChange={e => setBCity(e.target.value)} />
</div> </div>
<div> <div>
<Label>{__('Postcode')}</Label> <Label>{__('Postcode')}</Label>
<Input className="rounded-md border px-3 py-2" value={bPost} onChange={e=>setBPost(e.target.value)} /> <Input className="rounded-md border px-3 py-2" value={bPost} onChange={e => setBPost(e.target.value)} />
</div> </div>
<div> <div>
<Label>{__('Country')}</Label> <Label>{__('Country')}</Label>
@@ -1137,7 +1138,7 @@ export default function OrderForm({
{hasPhysicalProduct && ( {hasPhysicalProduct && (
<div className="pt-2 mt-4"> <div className="pt-2 mt-4">
<div className="flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 text-sm">
<Checkbox id="shipDiff" checked={shipDiff} onCheckedChange={(v)=> setShipDiff(Boolean(v))} /> <Checkbox id="shipDiff" checked={shipDiff} onCheckedChange={(v) => setShipDiff(Boolean(v))} />
<Label htmlFor="shipDiff" className="leading-none">{__('Ship to a different address')}</Label> <Label htmlFor="shipDiff" className="leading-none">{__('Ship to a different address')}</Label>
</div> </div>
</div> </div>
@@ -1164,7 +1165,7 @@ export default function OrderForm({
{field.type === 'select' && field.options ? ( {field.type === 'select' && field.options ? (
<Select <Select
value={shippingData[fieldKey] || ''} value={shippingData[fieldKey] || ''}
onValueChange={(v) => setShippingData({...shippingData, [fieldKey]: v})} onValueChange={(v) => setShippingData({ ...shippingData, [fieldKey]: v })}
> >
<SelectTrigger className="w-full"> <SelectTrigger className="w-full">
<SelectValue placeholder={field.placeholder || field.label} /> <SelectValue placeholder={field.placeholder || field.label} />
@@ -1179,14 +1180,14 @@ export default function OrderForm({
<SearchableSelect <SearchableSelect
options={countryOptions} options={countryOptions}
value={shippingData.country || ''} value={shippingData.country || ''}
onChange={(v) => setShippingData({...shippingData, country: v})} onChange={(v) => setShippingData({ ...shippingData, country: v })}
placeholder={field.placeholder || __('Select country')} placeholder={field.placeholder || __('Select country')}
disabled={oneCountryOnly} disabled={oneCountryOnly}
/> />
) : field.type === 'textarea' ? ( ) : field.type === 'textarea' ? (
<Textarea <Textarea
value={shippingData[fieldKey] || ''} value={shippingData[fieldKey] || ''}
onChange={(e) => setShippingData({...shippingData, [fieldKey]: e.target.value})} onChange={(e) => setShippingData({ ...shippingData, [fieldKey]: e.target.value })}
placeholder={field.placeholder} placeholder={field.placeholder}
required={field.required} required={field.required}
/> />
@@ -1194,7 +1195,7 @@ export default function OrderForm({
<Input <Input
type={field.type === 'email' ? 'email' : field.type === 'tel' ? 'tel' : 'text'} type={field.type === 'email' ? 'email' : field.type === 'tel' ? 'tel' : 'text'}
value={shippingData[fieldKey] || ''} value={shippingData[fieldKey] || ''}
onChange={(e) => setShippingData({...shippingData, [fieldKey]: e.target.value})} onChange={(e) => setShippingData({ ...shippingData, [fieldKey]: e.target.value })}
placeholder={field.placeholder} placeholder={field.placeholder}
required={field.required} required={field.required}
/> />
@@ -1281,7 +1282,7 @@ export default function OrderForm({
<div className="rounded border p-4 space-y-2"> <div className="rounded border p-4 space-y-2">
<Label>{__('Customer note (optional)')}</Label> <Label>{__('Customer note (optional)')}</Label>
<Textarea value={note} onChange={e=>setNote(e.target.value)} placeholder={__('Write a note for this order…')} /> <Textarea value={note} onChange={e => setNote(e.target.value)} placeholder={__('Write a note for this order…')} />
</div> </div>
{!hideSubmitButton && ( {!hideSubmitButton && (
@@ -1297,6 +1298,6 @@ export default function OrderForm({
function isEmptyAddress(a: any) { function isEmptyAddress(a: any) {
if (!a) return true; if (!a) return true;
const keys = ['first_name','last_name','address_1','city','state','postcode','country']; const keys = ['first_name', 'last_name', 'address_1', 'city', 'state', 'postcode', 'country'];
return keys.every(k => !a[k]); return keys.every(k => !a[k]);
} }