fix multi drop menu open when more than a topic tag clicked in same moment

app-nia-catalog/src/main/java/com/google/samples/apps/niacatalog/ui/Catalog.kt

@@ -518,24 +518,30 @@ fun NiaCatalog() {
                 item { Text("Tags", Modifier.padding(top = 16.dp)) }
                 item {
                     FlowRow(mainAxisSpacing = 16.dp) {
+                        var expandedTopic by remember { mutableStateOf<String?>(null) }
+
                         var firstFollowed by remember { mutableStateOf(false) }
                         NiaTopicTag(
+                            expanded = expandedTopic == "Topic 1",
                             followed = firstFollowed,
+                            onDropMenuToggle = { show -> expandedTopic = if (show) "Topic 1" else null },
                             onFollowClick = { firstFollowed = true },
                             onUnfollowClick = { firstFollowed = false },
                             onBrowseClick = {},
-                            text = { Text(text = "Topic".uppercase()) },
+                            text = { Text(text = "Topic 1".uppercase()) },
                             followText = { Text(text = "Follow") },
                             unFollowText = { Text(text = "Unfollow") },
                             browseText = { Text(text = "Browse topic") }
                         )
                         var secondFollowed by remember { mutableStateOf(true) }
                         NiaTopicTag(
+                            expanded = expandedTopic == "Topic 2",
                             followed = secondFollowed,
+                            onDropMenuToggle = { show -> expandedTopic = if (show) "Topic 2" else null },
                             onFollowClick = { secondFollowed = true },
                             onUnfollowClick = { secondFollowed = false },
                             onBrowseClick = {},
-                            text = { Text(text = "Topic".uppercase()) },
+                            text = { Text(text = "Topic 2".uppercase()) },
                             followText = { Text(text = "Follow") },
                             unFollowText = { Text(text = "Unfollow") },
                             browseText = { Text(text = "Browse topic") }

core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Tag.kt

@@ -32,7 +32,9 @@ import com.google.samples.apps.nowinandroid.core.designsystem.R
 
 @Composable
 fun NiaTopicTag(
+    expanded : Boolean = false,
     followed: Boolean,
+    onDropMenuToggle : (show: Boolean) -> Unit = {},
     onFollowClick: () -> Unit,
     onUnfollowClick: () -> Unit,
     onBrowseClick: () -> Unit,
@@ -43,7 +45,7 @@ fun NiaTopicTag(
     unFollowText: @Composable () -> Unit = { Text(stringResource(R.string.unfollow)) },
     browseText: @Composable () -> Unit = { Text(stringResource(R.string.browse_topic)) }
 ) {
-    var expanded by remember { mutableStateOf(false) }
+
     Box(modifier = modifier) {
         val containerColor = if (followed) {
             MaterialTheme.colorScheme.primaryContainer
@@ -51,7 +53,7 @@ fun NiaTopicTag(
             MaterialTheme.colorScheme.surfaceVariant
         }
         NiaTextButton(
-            onClick = { expanded = true },
+            onClick = { onDropMenuToggle(true) },
             enabled = enabled,
             small = true,
             colors = NiaButtonDefaults.textButtonColors(
@@ -69,7 +71,7 @@ fun NiaTopicTag(
         )
         NiaDropdownMenu(
             expanded = expanded,
-            onDismissRequest = { expanded = false },
+            onDismissRequest = { onDropMenuToggle(false) },
             items = if (followed) listOf(UNFOLLOW, BROWSE) else listOf(FOLLOW, BROWSE),
             onItemClick = { item ->
                 when (item) {

core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt

@@ -268,13 +268,17 @@ fun NewsResourceTopics(
     topics: List<Topic>,
     modifier: Modifier = Modifier
 ) {
+    var expandedTopic by remember { mutableStateOf<String?>(null) }
+
     Row(
         modifier = modifier.horizontalScroll(rememberScrollState()), // causes narrow chips
         horizontalArrangement = Arrangement.spacedBy(4.dp),
     ) {
         for (topic in topics) {
             NiaTopicTag(
+                expanded = expandedTopic == topic.id,
                 followed = true, // ToDo: Check if topic is followed
+                onDropMenuToggle = { show -> expandedTopic = if (show) topic.id else null },
                 onFollowClick = { }, // ToDo
                 onUnfollowClick = { }, // ToDo
                 onBrowseClick = { }, // ToDo