Feature Summary
Replace the manual text entry fields in the Climate Risk Analyzer section with a hierarchical, cascading autocomplete dropdown system (Country ➔ State ➔ City) to enforce geographical accuracy and eliminate input typos.
Problem Statement
The current interface uses three unlinked, manual text inputs arranged as "City", "State", and "Country".
- User Pain Point: Typing full names manually is slow, inefficient, and highly prone to spelling errors.
- System Limitation: Because fields are independent and lack validation alignment, a user can enter a mismatched location (e.g., City: "Mumbai", State: "Texas", Country: "Japan"). This sends conflicting geographical parameters to the backend, resulting in failed API calls and broken risk analysis cards.
Proposed Solution
Implement a structured, cascading selector system using a reliable package like country-state-city combined with a searchable autocomplete input component (such as react-select).
The form hierarchy and data flow will operate sequentially:
- Country Dropdown (Active): Searchable autocomplete populated with all global countries.
- State Dropdown (Disabled until Country is selected): Dynamically filters and lists only the states/provinces belonging to the chosen country.
- City Dropdown (Disabled until State is selected): Dynamically filters and lists only the valid cities within that specific state.
Possible Alternatives
Use Case
- For End Users: Provides a bulletproof, rapid, and intuitive search workflow. Users get error-free climate risk summaries on their first try without worrying about exact spelling or matching state jurisdictions manually.
- For Developers/Contributors: Standardizes incoming search parameters, making backend query validation predictable and reducing uncaught 400/404 API request errors.
Scope of Contribution
Checklist
Additional Context
I am an SSoC contributor. I noticed this layout issue while exploring the website and would love to build this dropdown system. Please assign this issue to me!
Feature Summary
Replace the manual text entry fields in the Climate Risk Analyzer section with a hierarchical, cascading autocomplete dropdown system (Country ➔ State ➔ City) to enforce geographical accuracy and eliminate input typos.
Problem Statement
The current interface uses three unlinked, manual text inputs arranged as "City", "State", and "Country".
Proposed Solution
Implement a structured, cascading selector system using a reliable package like
country-state-citycombined with a searchable autocomplete input component (such asreact-select).The form hierarchy and data flow will operate sequentially:
Possible Alternatives
Use Case
Scope of Contribution
Checklist
Additional Context
I am an SSoC contributor. I noticed this layout issue while exploring the website and would love to build this dropdown system. Please assign this issue to me!