fix: geo location dropdown bugfixes in playground

[kabilansakthivelu]

Description

• Added onChange prop to Cities and Zipcodes dropdown
• Made changes to clear Cities and Zipcodes field options and selected value when Country / State is changed

Changes Made

List the main changes made in this pull request.

Title	---
JIRA link	NA
Slack thread (if any)	NA
Product spec	NA
Tech spec/One-pager	NA
Bundle Size Difference	NA
Fixes Issue	NA

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• This change is a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Is your change backward compatible ?
• Tested on major browsers (Chrome, Firefox, Safari, IE) ?
• Tested in a consumer application(s) ?

Additional Notes

1. In playground, onChange prop is passed to Cities and Zipcodes dropdown, so that the selected value in the respective dropdown field will get updated.

Default selected city on state change:

onChange for city field:

2. In playground, for getCities and getZipcodes where state is selected, and when country is changed from India to Afghanistan (which does not have any states division), then the field options for State, Cities and also Zipcodes fields were not cleared. Updated useEffect to reset the child field options and value on parent field value change.

When child field value and options were not cleared after parent field value change:

When child field value and options were cleared after parent field value change:

3. Added placeholder content to geo location dropdown fields, if no records are available.

Checklist:

• Add Jira ID(s) in PR title and in the description?
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• My code is written in TypeScript and follows the coding standards of the project.
• I have added relevant documentation and updated the README if necessary.
• My commit messages are clear and follow the project's commit message conventions.
• Is any external library added?
• My changes do not introduce any new runtime errors or warnings.
• All relevant unit tests have been added/updated in my PR for the change.
• Any Screenshots (mobile & desktop) required for PR? If yes, have you added the respective screenshots ?
• Any manual dev testing done by you on beta/func environment?
• Reviewer added (SLA 2 days)

Reviewer Checklist

• Sufficient QA/Dev-Testing is done with proof (test cases list)
• Ensure that the change in bundle size falls within the acceptable range.

---

PR Title Format

Format: <type>: <subject>

Types can be as follows:

• feat: (new feature for the user, not a new feature for build script)
• fix: (bug fix for the user, not a fix to a build script)
• docs: (changes to the documentation)
• style: (formatting, missing semi colons, etc; no production code change)
• refactor: (refactoring production code, eg. renaming a variable)
• test: (adding missing tests, refactoring tests; no production code change)
• chore: (updating grunt tasks etc; no production code change)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6b0e633

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[RgnDunes]

@kabilansakthivelu selected IN first and everything worked as expected, changed country from IN to Pakistan or any other in general, cities and state dropdown doesn't work.

[kabilansakthivelu]

Hi @RgnDunes, the above mentioned behaviour is because, we are not triggering getStates call when Pakistan is selected as it does not have States classification and only has Provinces system.

Currently in Prod also, we are not making a call to fetch States for Pakistan but the fetched states for previous country was not cleared leading to mismatch between the states displayed for a country selected.

As part of this PR, made changes to clear the previously fetched info whenever parent field value changes.

Please refer the below image for the states displayed for country Pakistan in Prod currently (previously selected country - India). Thanks