Bug 498844 - clock time picker requires scrolling after porting to Qt6, that's almost unusable on touchscreen
Summary: clock time picker requires scrolling after porting to Qt6, that's almost unus...
Status: RESOLVED FIXED
Alias: None
Product: calindori
Classification: Applications
Component: general (other bugs)
Version First Reported In: 24.08.3
Platform: Debian testing Linux
: NOR normal
Target Milestone: ---
Assignee: Unassigned bugs
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2025-01-18 13:01 UTC by Marco Mattiolo
Modified: 2025-07-29 21:21 UTC (History)
0 users

See Also:
Latest Commit:
Version Fixed In:
Sentry Crash Report:


Attachments
screenshot showing clock time picker on calindori 24.02.1 (56.10 KB, image/png)
2025-01-18 13:01 UTC, Marco Mattiolo
Details
screenshot showing clock time picker on calindori 24.08.3 (38.02 KB, image/png)
2025-01-18 13:01 UTC, Marco Mattiolo
Details
screen recording on the clock time picker with calindori 24.08.3 (21.48 KB, video/webm)
2025-01-18 13:02 UTC, Marco Mattiolo
Details
clock time picker in calindori_24.12.1 on enchilada and beryllium (86.19 KB, image/png)
2025-02-22 22:42 UTC, Marco Mattiolo
Details
up-to-date enchilada/beryllium comparison with calindori 25.04.0 (148.92 KB, image/png)
2025-07-26 13:57 UTC, Marco Mattiolo
Details
screenshot of the issue on amd64 Mobian VM (49.86 KB, image/png)
2025-07-26 14:00 UTC, Marco Mattiolo
Details
comparison of calindori_24.08.3 when dowgrading Qt6 from 6.8 to 6.7 and KF6 from 6.13 to 6.6, plus calindori 24.02.1 with Qt5 (372.34 KB, image/png)
2025-07-27 15:16 UTC, Marco Mattiolo
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Marco Mattiolo 2025-01-18 13:01:11 UTC
Created attachment 177505 [details]
screenshot showing clock time picker on calindori 24.02.1

SUMMARY
As shown in the attachments, the time selector interface has become almost unusable after calindori being ported to Qt6.
Downgrading calindori to 24.02.1 (nothing special in the version number, it's the previous one available in [1]) gets time selector usable again, especially for the AM/PM selector. On the other hand, with 24.08.3 version, the AM/PM selector requires scrolling to be visible, and the scrolled page jumps back upwards making it almost impossible to select AM/PM.

My guess, src/contents/ui/kirigami-playground/TimePicker.qml was overlooked with 4146e55e8898f208f9c5812870bc2e14331f3be3 and in general with Qt6 migration.

[1] http://snapshot.debian.org/package/calindori/

STEPS TO REPRODUCE
1. enter "create new event" menu
2. tap on time to enter clock time picker

OBSERVED RESULT
in order to select AM/PM , scrolling is needed

EXPECTED RESULT
both the clock and AM/PM can be interacted without scrolling

SOFTWARE/OS VERSIONS
KDE Plasma Version: 6.2.5
KDE Frameworks Version: 6.10.0
Qt Version: 6.7.2
Comment 1 Marco Mattiolo 2025-01-18 13:01:34 UTC
Created attachment 177506 [details]
screenshot showing clock time picker on calindori 24.08.3
Comment 2 Marco Mattiolo 2025-01-18 13:02:08 UTC
Created attachment 177507 [details]
screen recording on the clock time picker with calindori 24.08.3
Comment 3 Marco Mattiolo 2025-02-22 22:41:11 UTC
I'm doing some tests and analysis on this issue: IIUC, the relevant QML files are (in parent->child order)
src/contents/ui/TimeSelectorButton.qml
src/contents/ui/TimePickerSheet.qml
src/contents/ui/kirigami-playground/TimePicker.qml

My first approach was to play with https://invent.kde.org/plasma-mobile/calindori/-/blob/master/src/contents/ui/TimePickerSheet.qml?ref_type=heads#L26 (preferredHeight: Kirigami.Units.gridUnit * 25), but I realized that this calindori page behaves differently on enchilada and on beryllium. Maybe it's relevant, the enchilada is my daily driver, then the calendar has some events stored.
I'm surprised that logs are different, as well: the line
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
is found only on the beryllium, which has the clock time picker page tall enough to be used without issues. Seems like that the binding loop allows the page to be a different height than what is specified in the code, thus not showing the issue.
https://invent.kde.org/plasma-mobile/calindori/-/blob/master/src/contents/ui/TimeSelectorButton.qml?ref_type=heads#L47 points to TimePickerSheet, then I'm assuming the issue to be wherever a parent-child couple is in some way both declaring height. maybe it's the "Layout.fillHeight: true" in https://invent.kde.org/plasma-mobile/calindori/-/blob/master/src/contents/ui/kirigami-playground/TimePicker.qml?ref_type=heads#L32 ?

On xiaomi-beryllium:
Linux mobian 6.12-qcom #6.12.16-1 SMP PREEMPT Fri Feb 21 16:03:52 UTC 2025 aarch64

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
mobian@mobian:~$ dpkg -l | grep calindori
ii  calindori                                                24.12.1-1                              arm64        Calendar for Plasma Mobile
mobian@mobian:~$ calindori
qt.qml.typeregistration: Invalid QML element name "CalendarAttendee"; value type names should begin with a lowercase letter
calendar:  "personal"
Storage file loaded
qrc:/Main.qml:58:9: QML CalendarMonthPage: Created graphical object was not placed in the graphics scene.
kf.quickcharts.datasource: ModelSource: Invalid role  -1 "color"
kf.quickcharts.datasource: ModelSource: Invalid role  -1 "color"
qrc:/CalendarHeader.qml:26: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:36: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:41: TypeError: Cannot read property 'font' of undefined
qrc:/MonthView.qml:103: TypeError: Cannot read property 'font' of undefined
qrc:/MonthView.qml:109: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarMonthPage.qml:49:13: Unable to assign [undefined] to int
qrc:/CalendarMonthPage.qml:56:13: Unable to assign [undefined] to int
qrc:/CalendarMonthPage.qml:143:9: QML EventsCardView: Created graphical object was not placed in the graphics scene.
kf.coreaddons: The plugin "/usr/lib/aarch64-linux-gnu/qt6/plugins/kpeople/datasource/KPeopleVCard.so" explicitly states an Id in the embedded metadata, which is different from the one derived from the filename The Id field from the KPlugin object in the metadata should be removed
qrc:/EventsCardView.qml:89:13: QML EventEditorPage: Created graphical object was not placed in the graphics scene.

loadPersistentAlarms: uid ""
kf.quickcharts.datasource: ModelSource: Invalid role  -1 "color"
kf.quickcharts.datasource: ModelSource: Invalid role  -1 "color"
kf.quickcharts.datasource: ModelSource: Invalid role  -1 "color"
kf.quickcharts.datasource: ModelSource: Invalid role  -1 "color"

AddAlarm:       Adding alarm. Seconds before start:  900
qrc:/CalendarHeader.qml:26: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:36: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:41: TypeError: Cannot read property 'font' of undefined
qrc:/MonthView.qml:103: TypeError: Cannot read property 'font' of undefined
qrc:/MonthView.qml:109: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:26: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:36: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:41: TypeError: Cannot read property 'font' of undefined
qrc:/MonthView.qml:103: TypeError: Cannot read property 'font' of undefined
qrc:/MonthView.qml:109: TypeError: Cannot read property 'font' of undefined
qrc:/TimePicker.qml:96: TypeError: Cannot read property 'font' of undefined
qrc:/TimePicker.qml:96: TypeError: Cannot read property 'font' of undefined
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
qrc:/TimeSelectorButton.qml:47:5: QML TimePickerSheet: Binding loop detected for property "y"
mobian@mobian:~$ 

And on enchilada:
Linux mobian 6.12-qcom #6.12.16-1 SMP PREEMPT Fri Feb 21 16:03:52 UTC 2025 aarch64

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
marco@mobian:~$ dpkg -l | grep calindori
ii  calindori                                                24.12.1-1                       arm64        Calendar for Plasma Mobile
marco@mobian:~$ calindori
qt.qml.typeregistration: Invalid QML element name "CalendarAttendee"; value type names should begin with a lowercase letter
calendar:  "personal"
Storage file loaded
qrc:/Main.qml:58:9: QML CalendarMonthPage: Created graphical object was not placed in the graphics scene.
kf.quickcharts.datasource: ModelSource: Invalid role  -1 "color"
kf.quickcharts.datasource: ModelSource: Invalid role  -1 "color"
qrc:/CalendarHeader.qml:26: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:36: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:41: TypeError: Cannot read property 'font' of undefined
qrc:/MonthView.qml:103: TypeError: Cannot read property 'font' of undefined
qrc:/MonthView.qml:109: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarMonthPage.qml:49:13: Unable to assign [undefined] to int
qrc:/CalendarMonthPage.qml:56:13: Unable to assign [undefined] to int
qrc:/CalendarMonthPage.qml:143:9: QML EventsCardView: Created graphical object was not placed in the graphics scene.
kf.coreaddons: The plugin "/usr/lib/aarch64-linux-gnu/qt6/plugins/kpeople/datasource/KPeopleVCard.so" explicitly states an Id in the embedded metadata, which is different from the one derived from the filename The Id field from the KPlugin object in the metadata should be removed
qrc:/EventsCardView.qml:89:13: QML EventEditorPage: Created graphical object was not placed in the graphics scene.

loadPersistentAlarms: uid ""
kf.quickcharts.datasource: ModelSource: Invalid role  -1 "color"
kf.quickcharts.datasource: ModelSource: Invalid role  -1 "color"
kf.quickcharts.datasource: ModelSource: Invalid role  -1 "color"
kf.quickcharts.datasource: ModelSource: Invalid role  -1 "color"

AddAlarm:       Adding alarm. Seconds before start:  900
qrc:/CalendarHeader.qml:26: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:36: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:41: TypeError: Cannot read property 'font' of undefined
qrc:/MonthView.qml:103: TypeError: Cannot read property 'font' of undefined
qrc:/MonthView.qml:109: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:26: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:36: TypeError: Cannot read property 'font' of undefined
qrc:/CalendarHeader.qml:41: TypeError: Cannot read property 'font' of undefined
qrc:/MonthView.qml:103: TypeError: Cannot read property 'font' of undefined
qrc:/MonthView.qml:109: TypeError: Cannot read property 'font' of undefined
qrc:/TimePicker.qml:96: TypeError: Cannot read property 'font' of undefined
qrc:/TimePicker.qml:96: TypeError: Cannot read property 'font' of undefined
marco@mobian:~$ exit
Comment 4 Marco Mattiolo 2025-02-22 22:42:06 UTC
Created attachment 178752 [details]
clock time picker in calindori_24.12.1 on enchilada and beryllium
Comment 5 Marco Mattiolo 2025-07-26 13:57:19 UTC
Created attachment 183534 [details]
up-to-date enchilada/beryllium comparison  with calindori 25.04.0

I'm not so sure anymore of the issue being in calindori code: I'm doing once again the enchilada/beryllium comparison on 2 up-to-date Mobian systems. Now both devices show the small and unusable clock window. I should check whether downgrading some of the involved libraries (kirigami? qtquick layout?) helps.
Comment 6 Marco Mattiolo 2025-07-26 14:00:55 UTC
Created attachment 183535 [details]
screenshot of the issue on amd64 Mobian VM

Issue is found even on an amd64 VM (mobian-amd64-plasma-mobile-20250720.img.xz available from [1] ). I don't think my PC has a monitor too small for such a dialog to be rendered correctly, I think this rules out any hypothesis related to small screens of mobile devices.

[1] https://images.mobian-project.org/amd64/weekly/
Comment 7 Marco Mattiolo 2025-07-27 15:16:38 UTC
Created attachment 183566 [details]
comparison of calindori_24.08.3 when dowgrading Qt6 from 6.8 to 6.7 and KF6 from 6.13 to 6.6, plus calindori 24.02.1 with Qt5

I've tried another test downgrading KF6 and Qt6 to the versions available in Debian testing as of December last year.

For reference, test can be replicated on an up-to-date Mobian trixie system, by adding following snapshot line to sources

mobian@mobian:~$ cat /etc/apt/sources.list.d/snapshot.list 
deb     [check-valid-until=no] https://snapshot.debian.org/archive/debian/20241205/ trixie main

and launch the following

mobian@mobian:~$ sudo apt install libqt6qml6=6.7.2+dfsg-11 libqt6qmlmodels6=6.7.2+dfsg-11 libqt6qmlworkerscript6=6.7.2+dfsg-11 libqt6quick6=6.7.2+dfsg-11 libqt6quickcontrols2-6=6.7.2+dfsg-11 libqt6quickshapes6=6.7.2+dfsg-11 libqt6quicktemplates2-6=6.7.2+dfsg-11 libqt6quickwidgets6=6.7.2+dfsg-11 qml6-module-qt-labs-animation=6.7.2+dfsg-11 qml6-module-qt-labs-folderlistmodel=6.7.2+dfsg-11 qml6-module-qt-labs-platform=6.7.2+dfsg-11 qml6-module-qt-labs-qmlmodels=6.7.2+dfsg-11 qml6-module-qt-labs-settings=6.7.2+dfsg-11 qml6-module-qtcore=6.7.2+dfsg-11 qml6-module-qtqml=6.7.2+dfsg-11 qml6-module-qtqml-models=6.7.2+dfsg-11 qml6-module-qtqml-workerscript=6.7.2+dfsg-11 qml6-module-qtquick=6.7.2+dfsg-11 qml6-module-qtquick-controls=6.7.2+dfsg-11 qml6-module-qtquick-dialogs=6.7.2+dfsg-11 qml6-module-qtquick-effects=6.7.2+dfsg-11 qml6-module-qtquick-layouts=6.7.2+dfsg-11 qml6-module-qtquick-localstorage=6.7.2+dfsg-11 qml6-module-qtquick-particles=6.7.2+dfsg-11 qml6-module-qtquick-shapes=6.7.2+dfsg-11 qml6-module-qtquick-templates=6.7.2+dfsg-11 qml6-module-qtquick-tooling=6.7.2+dfsg-11 qml6-module-qtquick-window=6.7.2+dfsg-11 libqt6core6t64=6.7.2+dfsg-4 libqt6gui6=6.7.2+dfsg-4 libqt6widgets6=6.7.2+dfsg-4 libqt6dbus6=6.7.2+dfsg-4 libqt6network6=6.7.2+dfsg-4 libqt6opengl6=6.7.2+dfsg-4 libqt6sql6=6.7.2+dfsg-4 calindori=24.08.3-1 qml6-module-org-kde-breeze=6.2.3-1 qml6-module-org-kde-quickcharts=6.6.0-3 libquickcharts1=6.6.0-3 libquickchartscontrols1=6.6.0-3 libkf6configcore6=6.6.0-2 libkf6config-data=6.6.0-2 libkf6guiaddons6=6.6.0-1 libkf6guiaddons-data=6.6.0-1 libkf6iconthemes6=6.6.0-2 libkf6iconthemes-data=6.6.0-2 libkirigamiplatform6=6.6.0-2 libkirigami-data=6.6.0-2 libkf6archive6=6.6.0-3 libkf6archive-data=6.6.0-3 libkf6breezeicons6=6.6.0-2 libkf6i18n6=6.6.0-2 libkf6i18n-data=6.6.0-2 libkf6colorscheme6=6.6.0-1 libkf6colorscheme-data=6.6.0-1 libkf6configgui6=6.6.0-2 libkf6notifications6=6.6.0-2 libkf6notifications-data=6.6.0-2 libkf6people6=6.6.0-2 libkf6people-data=6.6.0-2 libkf6contacts6=6.6.0-2 libkf6contacts-data=6.6.0-2 libkf6codecs6=6.6.0-1 libkf6codecs-data=6.6.0-1 libkf6i18nlocaledata6=6.6.0-2 libkf6coreaddons6=6.6.0-2 libkf6coreaddons-data=6.6.0-2 libqt6svg6=6.7.2-4 qml6-module-org-kde-people=6.6.0-2 libqt6waylandclient6=6.7.2-5 qml6-module-org-kde-kirigami=6.6.0-2 libkirigamidelegates6=6.6.0-2 libkirigami6=6.6.0-2 libkirigamiprivate6=6.6.0-2 libkirigamidialogs6=6.6.0-2 libkirigamiprimitives6=6.6.0-2 libkf6peoplebackend6=6.6.0-2 libkirigamilayouts6=6.6.0-2 qml6-module-org-kde-coreaddons=6.6.0-2 libkf6dbusaddons6=6.6.0-1+b1 libkf6dbusaddons-data=6.6.0-1 qml6-module-org-kde-kitemmodels=6.6.0-2 libkf6itemmodels6=6.6.0-2 qml6-module-org-kde-desktop=6.6.0-2 qml6-module-org-kde-sonnet=6.6.0-2 libkf6sonnetcore6=6.6.0-2 libkf6sonnet-data=6.6.0-2 libkf6calendarcore6=6.6.0-2 qt6-wayland=6.7.2-5 libqt6waylandcompositor6:arm64=6.7.2-5 libqt6wlshellintegration6:arm64=6.7.2-5

I did the comparison in Phosh, because this massive downgrade would have likely broken Plasma session. Following test

mobian@mobian:~$ cat /etc/apt/sources.list.d/snapshot.list 
deb     [check-valid-until=no] https://snapshot.debian.org/archive/debian/20241105/ trixie main
mobian@mobian:~$ sudo apt install calindori=24.02.1-1+b1

All these tests have been done launching calindori with
$ QT_QPA_PLATFORM=wayland QT_QUICK_CONTROLS_STYLE=org.kde.breeze QT_WAYLAND_DISABLE_WINDOWDECORATION=1 calindori

As it can be seen, either the issue was introduced in calindori between 24.02.1 and 24.08.3, either it's an issue with the Qt5-6 migration...
Comment 8 Bug Janitor Service 2025-07-28 05:45:54 UTC
A possibly relevant merge request was started @ https://invent.kde.org/plasma-mobile/calindori/-/merge_requests/100
Comment 9 Devin Lin 2025-07-29 21:21:26 UTC
Git commit f0d6a91ed099de2ccb6886a5ff22cf13d17a76ea by Devin Lin.
Committed on 29/07/2025 at 20:11.
Pushed by devinlin into branch 'master'.

TimePickerSheet: Import kclock time picker for better UX

The current time picker has poor UX for mobile, and also is very large,
causing it to overflow out of the dialog. Import the kclock time picker
for simplicity.

Fixes: https://invent.kde.org/plasma-mobile/calindori/-/merge_requests/81#note_1269509

A  +301  -0    LICENSES/GPL-2.0-or-later.txt
A  +445  -0    LICENSES/LGPL-2.0-or-later.txt
M  +3    -7    src/contents/ui/EventEditorPage.qml
M  +10   -7    src/contents/ui/TimePickerSheet.qml
M  +1    -4    src/contents/ui/TimeSelectorButton.qml
M  +4    -8    src/contents/ui/TodoEditorPage.qml
M  +95   -90   src/contents/ui/kirigami-playground/TimePicker.qml
A  +163  -0    src/contents/ui/kirigami-playground/TimePickerSpinBox.qml     [License: GPL(v2.0+)]
A  +50   -0    src/contents/ui/kirigami-playground/TimePickerSpinBoxButton.qml     [License: LGPL(v2.0+)]
M  +2    -0    src/resources.qrc

https://invent.kde.org/plasma-mobile/calindori/-/commit/f0d6a91ed099de2ccb6886a5ff22cf13d17a76ea