The behavior is if you select a state it selects all the cities in that dropdown. But in this scenario if user selects USA shouldn't all the states be disabled/gray rather than selecting all the states? I say this because if all the states/cities are chosen and they change there mind they would have to unselect them all.
No, they should be enabled.
What you're using here is a tree view pattern.
A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children may be expanded or collapsed to show or hide the children. For example, in a file system navigator that uses a tree view to display folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both. This is a very common pattern (just take a look at your own operating system's file manager) that most users will recognize at first glance.
The idea is that you can quickly select and deselect items or groups of items with minimal effort, while easily understanding what happens to the selection
So the convention is to use a sign, check mark or similar for each individual item selected or for each group for which all items are selected.
However, if not all elements of a group are selected, a square is usually displayed in the checkbox (see image below)
Now, to address your specific example, let us look at some use cases:
- I want to select all cities in the USA: then I select the USA check box
- I want to select a region: I select only one region without selecting USA. Then USA will show a square.
- I want to select a city within a region group: I open this region and select a city. Now both the region dropdown menu and USA should show a square
- I want to select most of the US, but not all of the region: then I probably select the US and then look for a few entries that do not match my criteria. Squares are displayed for both the USA and some other groups.
The important thing is: users can use this flow in increasing (they start adding selected items) or decreasing (they select everything and then filter the items they do not want) ways. To do this, the elements must always be enabled so that users can interact in any way they want.
At a certain level of complexity, it becomes difficult for the user to control what they want to select in a single dropdown. If there are potentially thousands of choices at the city level, a multiselect dropdown wouldn't be the correct pattern.
The right pattern depends on your use cases. What is your user trying to accomplish? Do they want to select a combination of large regions and one-off cities? Do they want to search for particular cities and only target those? Are they working more with an exclusion pattern (select all cities EXCEPT Dallas, which will have its own unique criteria)?
I would suggest you write out your user stories and design optimal workflows vs. trying to find a single component that can accommodate all items.