Merge pull request #246 from RobertMaged/robert/fix-topic-tag

fix multi drop menu open for topics tags

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

@@ -518,24 +518,34 @@ fun NiaCatalog() {
                 item { Text("Tags", Modifier.padding(top = 16.dp)) }
                 item {
                     FlowRow(mainAxisSpacing = 16.dp) {
+                        var expandedTopicId by remember { mutableStateOf<String?>(null) }
+
                         var firstFollowed by remember { mutableStateOf(false) }
                         NiaTopicTag(
+                            expanded = expandedTopicId == "Topic 1",
                             followed = firstFollowed,
+                            onDropMenuToggle = { show ->
+                                expandedTopicId = 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 = expandedTopicId == "Topic 2",
                             followed = secondFollowed,
+                            onDropMenuToggle = { show ->
+                                expandedTopicId = 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

@@ -21,10 +21,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
@@ -32,7 +28,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 +41,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 +49,7 @@ fun NiaTopicTag(
             MaterialTheme.colorScheme.surfaceVariant
         }
         NiaTextButton(
-            onClick = { expanded = true },
+            onClick = { onDropMenuToggle(true) },
             enabled = enabled,
             small = true,
             colors = NiaButtonDefaults.textButtonColors(
@@ -69,7 +67,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,21 @@ fun NewsResourceTopics(
     topics: List<Topic>,
     modifier: Modifier = Modifier
 ) {
+    // Store the ID of the Topic which has its "following" menu expanded, if any.
+    // To avoid UI confusion, only one topic can have an expanded menu at a time.
+    var expandedTopicId by remember { mutableStateOf<String?>(null) }
+
     Row(
         modifier = modifier.horizontalScroll(rememberScrollState()), // causes narrow chips
         horizontalArrangement = Arrangement.spacedBy(4.dp),
     ) {
         for (topic in topics) {
             NiaTopicTag(
+                expanded = expandedTopicId == topic.id,
                 followed = true, // ToDo: Check if topic is followed
+                onDropMenuToggle = { show ->
+                    expandedTopicId = if (show) topic.id else null
+                },
                 onFollowClick = { }, // ToDo
                 onUnfollowClick = { }, // ToDo
                 onBrowseClick = { }, // ToDo