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

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

@@ -113,7 +113,7 @@ type Props = {
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 --------------------------------------------------------
export default function OrderForm({
@@ -167,11 +167,11 @@ export default function OrderForm({
const only = countries[0]?.code || '';
if (shipDiff) {
if (only && shippingData.country !== only) {
setShippingData({...shippingData, country: only});
setShippingData({ ...shippingData, country: only });
}
} else {
// keep shipping synced to billing when not different
setShippingData({...shippingData, country: bCountry});
setShippingData({ ...shippingData, country: bCountry });
}
}
}, [oneCountryOnly, countries, shipDiff, bCountry, shippingData.country]);
@@ -295,10 +295,10 @@ export default function OrderForm({
const products: ProductSearchItem[] = Array.isArray(raw)
? raw
: Array.isArray(raw?.data)
? raw.data
: Array.isArray(raw?.rows)
? raw.rows
: [];
? raw.data
: Array.isArray(raw?.rows)
? raw.rows
: [];
const customersRaw = customersQ.data as any;
const customers: any[] = Array.isArray(customersRaw) ? customersRaw : [];
@@ -408,7 +408,7 @@ export default function OrderForm({
// Keep shipping country synced to billing when unchecked
React.useEffect(() => {
if (!shipDiff) setShippingData({...shippingData, country: bCountry});
if (!shipDiff) setShippingData({ ...shippingData, country: bCountry });
}, [shipDiff, bCountry]);
// Clamp states when country changes
@@ -417,7 +417,7 @@ export default function OrderForm({
}, [bCountry]);
React.useEffect(() => {
if (shippingData.state && !states[shippingData.country]?.[shippingData.state]) {
setShippingData({...shippingData, state: ''});
setShippingData({ ...shippingData, state: '' });
}
}, [shippingData.country]);
@@ -530,6 +530,7 @@ export default function OrderForm({
onSearch={setSearchQ}
disabled={!itemsEditable}
showCheckIndicator={false}
className="w-[200px] md:w-[300px]"
/>
</div>
) : (
@@ -1063,11 +1064,11 @@ export default function OrderForm({
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<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>
<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>
<Label>{__('Email')}</Label>
@@ -1076,27 +1077,27 @@ export default function OrderForm({
autoComplete="email"
className="rounded-md border px-3 py-2 appearance-none"
value={bEmail}
onChange={e=>setBEmail(e.target.value)}
onChange={e => setBEmail(e.target.value)}
/>
</div>
<div>
<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>
{/* Only show full address fields for physical products */}
{hasPhysicalProduct && (
<>
<div className="md:col-span-2">
<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>
<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>
<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>
<Label>{__('Country')}</Label>
@@ -1137,7 +1138,7 @@ export default function OrderForm({
{hasPhysicalProduct && (
<div className="pt-2 mt-4">
<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>
</div>
</div>
@@ -1164,7 +1165,7 @@ export default function OrderForm({
{field.type === 'select' && field.options ? (
<Select
value={shippingData[fieldKey] || ''}
onValueChange={(v) => setShippingData({...shippingData, [fieldKey]: v})}
onValueChange={(v) => setShippingData({ ...shippingData, [fieldKey]: v })}
>
<SelectTrigger className="w-full">
<SelectValue placeholder={field.placeholder || field.label} />
@@ -1179,14 +1180,14 @@ export default function OrderForm({
<SearchableSelect
options={countryOptions}
value={shippingData.country || ''}
onChange={(v) => setShippingData({...shippingData, country: v})}
onChange={(v) => setShippingData({ ...shippingData, country: v })}
placeholder={field.placeholder || __('Select country')}
disabled={oneCountryOnly}
/>
) : field.type === 'textarea' ? (
<Textarea
value={shippingData[fieldKey] || ''}
onChange={(e) => setShippingData({...shippingData, [fieldKey]: e.target.value})}
onChange={(e) => setShippingData({ ...shippingData, [fieldKey]: e.target.value })}
placeholder={field.placeholder}
required={field.required}
/>
@@ -1194,7 +1195,7 @@ export default function OrderForm({
<Input
type={field.type === 'email' ? 'email' : field.type === 'tel' ? 'tel' : 'text'}
value={shippingData[fieldKey] || ''}
onChange={(e) => setShippingData({...shippingData, [fieldKey]: e.target.value})}
onChange={(e) => setShippingData({ ...shippingData, [fieldKey]: e.target.value })}
placeholder={field.placeholder}
required={field.required}
/>
@@ -1281,7 +1282,7 @@ export default function OrderForm({
<div className="rounded border p-4 space-y-2">
<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>
{!hideSubmitButton && (
@@ -1297,6 +1298,6 @@ export default function OrderForm({
function isEmptyAddress(a: any) {
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]);
}