search

tscircuit / snippets

https://snippets.tscircuit.com
MIT License
3 stars 15 forks source link

Make country and state a dropdown in shipping info section #88

Closed andrii-balitskyi closed 4 days ago

andrii-balitskyi commented 1 week ago

Closes https://github.com/tscircuit/snippets/issues/87

https://github.com/user-attachments/assets/839b07fb-32b8-442e-8d6e-cbb6464c43a6

vercel[bot] commented 1 week ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment | Name | Status | Preview | Updated (UTC) | | :--- | :----- | :------ | :------ | | **snippets** | ⬜️ Ignored ([Inspect](https://vercel.com/tscircuit/snippets/GbU14L58APDNLfhLyhqtLwzzZ1f7)) | [Visit Preview](https://snippets-git-country-and-state-dropdown-tscircuit.vercel.app) | Oct 22, 2024 11:50am |
seveibar commented 1 week ago

Can we make the order of the fields more conventional

Id also recommend we do country first

image

andrii-balitskyi commented 1 week ago

Cool. Is it possible to type in the state/country? Just a pet peeve when it's a forced dropdown and not a dropdown or type search.

@seveibar you can't type but when you hit a key, the select dropdown does go to the choices starting with that letter. To make it typeable, should I use input tag together with datalist one?

Next step is to load this from the server via /accounts/get_shipping_info and set it with update_shipping_info

I added /accounts/get and /accounts/update endpoints for that as shipping info is stored on accounts. What's the benefit of using separate shipping info endpoints?

andrii-balitskyi commented 5 days ago

@seveibar I end up adding a custom SearchableSelect component. Also, I added some shipping properties to make the fields more conventional as you suggested. I updated the video in the PR description so you can take a look at the updated version. Lmk what you think.

seveibar commented 5 days ago

The design is a bit unconventional, the correct design is like this where you don't have to click the select field: https://react-select.com/home

Even better, shadcn has a builtin component here: https://ui.shadcn.com/docs/components/combobox

Still this is an improvement

andrii-balitskyi commented 4 days ago

@seveibar switched to ComboBox and updated the video in the PR description

seveibar commented 4 days ago

@andrii-balitskyi FWIW this is still not correct/best practice. The field itself should be a combobox, the combobox should not appear when you select the field