DateRangerPicker within a DatePickerDialog hides confirm button content [325107799]

Fixed

Bug

Status Update

No update yet.

Description

gk...@ramp.com

created issue #1

Feb 13, 2024 11:09PM

Jetpack Compose version: 1.6.1
Jetpack Compose component used: DateRangePicker
Android Studio Build: Android Studio Build: Android Studio Hedgehog | 2023.1.1
Build #AI-231.9392.1.2311.11076708, built on November 9, 2023
Kotlin version: 1.7.20
Material3 version: androidx.compose.material3:material3:1.2.0

If you put a DateRangePicker within a DatePickerDialog, the Confirm button seems to be hidden by default, I think being overlapped / pushed off by the DateRangePicker content. Manually adding a Modifier.weight(1f) to the DateRangePicker seems to fix this. Probably this Modifier should be included by default within the SDK to avoid this problem.

Sample Code:
```
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeTestV2Theme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
DatePickerTest()
}
}
}
}
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DatePickerTest() {
val state = rememberDateRangePickerState()

Column {
DatePickerDialog(
onDismissRequest = {},
confirmButton = {
TextButton(onClick = { Log.d("DatePicker", "Confirm button clicked") }) {
Text("Confirm")
}
},
) {
DateRangePicker(
// modifier = Modifier.weight(1f),
state = state,
)
}
}
}
```

Comments

sg...@google.com <sg...@google.com> Feb 13, 2024 11:24PM

Reassigned to ma...@google.com.

gk...@ramp.com <gk...@ramp.com> #2Feb 14, 2024 09:29PM

Project: platform/frameworks/support
Branch: androidx-master-dev

commit c60f33e229e31ab328ef6b59dab63b264954831c
Author: Alexandre Elias <aelias@google.com>
Date: Fri Jul 10 16:23:09 2020

Semantics no-op cleanups

Partly in response to lmr's broad code review, I did a pass of
superficial API/implementation cleanup. The main changes are:

- I changed each Boolean SemanticsProperty where false is equivalent to
not being present to take "Unit" instead. This is conceptually
clearer: it avoids questions like "can I cancel out a semantics from a
merged child by setting it to false?" Because "property = Unit" looks
weird, I also changed the style of these to "property()".

- I moved the Semantics id generator closer to where it's used, in
SemanticsModifierCore. I made it internal and an AtomicInt.
(Note that integer ids are heavily used in the Android
AccessibilityNodeInfo APIs so I can't simply remove them entirely.)

- I deleted dead code. Some examples include SemanticsHintOverrides,
a public API not connected to anything, and SemanticsPropertyKey
merge() open method which is never called. (In both cases I have
a different plan in mind for accessibility.)

Fixes: 145951226
Fixes: 145955412
Test: existing tests
Relnote: "Single-value semantics properties now use a calling style.
For example, 'semantics { hidden = true }' is now written as:
'semantics { hidden() }'."

Change-Id: Ic1afd12ea22c926babc9662f1804d80b33aa0cfc

M ui/integration-tests/benchmark/src/androidTest/java/androidx/ui/benchmark/test/LayoutNodeModifierBenchmark.kt
M ui/ui-core/api/0.1.0-dev15.txt
M ui/ui-core/api/current.txt
M ui/ui-core/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-core/api/public_plus_experimental_current.txt
M ui/ui-core/api/restricted_0.1.0-dev15.txt
M ui/ui-core/api/restricted_current.txt
M ui/ui-core/src/androidAndroidTest/kotlin/androidx/ui/graphics/vector/VectorTest.kt
M ui/ui-core/src/androidAndroidTest/kotlin/androidx/ui/semantics/SemanticsTests.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidActuals.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidComposeView.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidComposeViewAccessibilityDelegateCompat.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidPopup.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/Expect.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsConfiguration.kt
D ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsHintOverrides.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsModifier.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsNode.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsOwner.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsWrapper.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/semantics/SemanticsProperties.kt
M ui/ui-foundation/api/0.1.0-dev15.txt
M ui/ui-foundation/api/current.txt
M ui/ui-foundation/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-foundation/api/public_plus_experimental_current.txt
M ui/ui-foundation/api/restricted_0.1.0-dev15.txt
M ui/ui-foundation/api/restricted_current.txt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Clickable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Dialog.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Scroller.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/selection/Selectable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/selection/Toggleable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/semantics/FoundationSemanticsProperties.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ButtonTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/CardTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/CheckboxScreenshotTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/RadioButtonScreenshotTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ScaffoldTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/SnackbarTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/SurfaceTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ripple/RippleIndicationTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/textfield/TextFieldScreenshotTest.kt
M ui/ui-material/src/main/java/androidx/ui/material/AppBar.kt
M ui/ui-material/src/main/java/androidx/ui/material/TextFieldImpl.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/AssertsTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/CallSemanticsActionTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/ErrorMessagesTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/FindersTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/PrintToStringTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/ScrollToTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/TextActionsTest.kt
M ui/ui-test/src/main/java/androidx/ui/test/Actions.kt
M ui/ui-test/src/main/java/androidx/ui/test/Filters.kt
M ui/ui-text/api/0.1.0-dev15.txt
M ui/ui-text/api/current.txt
M ui/ui-text/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-text/api/public_plus_experimental_current.txt
M ui/ui-text/api/restricted_0.1.0-dev15.txt
M ui/ui-text/api/restricted_current.txt
M ui/ui-text/src/commonMain/kotlin/androidx/ui/text/CoreTextField.kt
M ui/ui-text/src/commonMain/kotlin/androidx/ui/text/TextSemanticsProperties.kt

https://android-review.googlesource.com/1360099

Wed Feb 14 2024 16:27:38 GMT-0500 (Eastern Standard Time).png

173 KB

View

Download

Wed Feb 14 2024 16:29:16 GMT-0500 (Eastern Standard Time).png

168 KB

View

Download

sg...@google.com <sg...@google.com> #3Feb 15, 2024 01:17AM

Accepted by sg...@google.com.

Thanks for this!

For the second issue - This is actually following our design spec at https://m3.material.io/components/date-pickers/specs#f25f68b7-1bb5-4248-829e-fe3cd3499dab, but I understand it does not work well for smaller screens.

If you can please file a separate issue that would be great, so we can refer it to the design team. In the meantime, as you've noticed, the API provides enough flexibility to overcome that issue and provide your own title and headline, so I hope that helped.

For the original issue, I'll try to push a fix into the DatePickerDialog internals to handle this asap.

gk...@ramp.com <gk...@ramp.com> #4Feb 15, 2024 03:20PM

Thank you. I think the second issue is actually not following the design spec given that the left padding is 64.dp for the title / headline and the design spec linked seems to show 16.dp left padding. I will make a second ticket. Indeed since the API provides title and headline and other such customization I am able to work around all of this for now, it was just confusing to see the component looking / behaving so weird at first and having deduce what was wrong with it. And thank you for addressing the first issue!

ap...@google.com <ap...@google.com> #5Feb 15, 2024 04:51PM

Project: platform/frameworks/support
Branch: androidx-main

commit f09ae412b90caf84bc36b55b0d4ef75b6b6503a8
Author: Shalom Gibly <sgibly@google.com>
Date: Wed Feb 14 17:03:33 2024

Ensure buttons visibility at the DatePickerDialog

Wrap the content with a Box and Modifier.weight = 1 to ensure any
confirm or dismiss buttons are visible when the dialog wraps a
DateRangePicker, or when large fonts are displayed on smaller screens.

Bug: 325107799
Bug: 277768544
Test: Verified screenshot tests and manual tests
Relnote: "Ensure that the DatePickerDialog displays its buttons when
nesting a DateRangePicker or when displaying any type of date picker on
small screens with larger fonts."

Change-Id: Ie4758e82b94eb2d5e448a973c550302ff1601f3f

M compose/material3/material3/src/androidMain/kotlin/androidx/compose/material3/DatePickerDialog.android.kt

https://android-review.googlesource.com/2964508

sg...@google.com <sg...@google.com> #6Feb 15, 2024 04:53PM

Marked as fixed.

Thanks. I believe that the design intent was to have the Date-Range-Picker in a full screen, and not in a dialog. But since we still allow placing it in a dialog (makes sense to me:)), there may be some adjustments that will need to be done to better support it visually.

Also, just pushed a fix for the main issue here and it should be available at the next 1.3.0 alpha release.

gk...@ramp.com <gk...@ramp.com> #7Feb 15, 2024 08:17PM

Thanks so much for fixing! I wasn't aware that DateRangePicker was intended to be used in a full screen, as it doesn't included confirm / cancel buttons by default it made sense to me to wrap it in a DatePickerDialog which does provide those. Appreciate your help here!

na...@google.com <na...@google.com> #8Mar 6, 2024 07:49PM

The following release(s) address this bug.It is possible this bug has only been partially addressed:

androidx.compose.material3:material3:1.3.0-alpha02
androidx.compose.material3:material3-android:1.3.0-alpha02
androidx.compose.material3:material3-desktop:1.3.0-alpha02

da...@gmail.com <da...@gmail.com> #9Jul 3, 2024 07:32AM

I'm still having this issue but thanks for the weight workaround.I load dependencies via "androidx.compose:compose-bom:2024.06.00". The documentation states that the material3 dependency is stuck on version 1.2.1, and the other 2 are not there at all. Should I add them and/or upgrade them? And in which BOM version are these fixes planned to be added?

Message last modified on Jul 3, 2024 07:43AM

da...@gmail.com <da...@gmail.com> #10Jul 3, 2024 07:54AM

When I change the component's mode, I no longer need the weight, since otherwise the dialog is bigger than content inside. When I change the modifier, a lag appears when the picker mode has changed, but the dialog box has not changed yet. How did you deal with this?