https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=44112 --- Comment #2 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 211704 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=211704&action=edit Bug 44112: Add a clear control to the Vue date picker and move its icon inside right The Vue FlatPickrWrapper, used for every "date" field of the Vue modules (ERM, Preservation, ILL, Item lists...), has no way to clear a date in one click. Koha's flatpickr defaults add a "clear date" link, but only to inputs carrying the "flatpickr" class used by the legacy pages, so the Vue inputs never got it. Clearing a date meant selecting the text and deleting it. The Vue selects (vue-select) already put their controls inside the field on the right: a grey clear cross, then the dropdown toggle. The date inputs did not: the calendar icon was inside on the left, and the clear link of the legacy pages sits outside on the right, in red. Make the date picker consistent with the selects: - a grey clear cross inside the field on the right, shown only when the field has a value, followed by the calendar icon (moved from the left) - "clearable" prop of FlatPickrWrapper (default true) to opt out - the cross is a button with a "Clear date" label The size and the position of the input in the forms do not change. Legacy pages are not affected. Test plan: 1. Apply the patch and rebuild the JS (yarn js:build) 2. Enable the ERMModule preference 3. Go to E-resource management > Agreements > New agreement, and click "Add new period" => The calendar icon is inside the date fields, on the right. No cross is shown. 4. Pick a date in "End date" => A grey cross is shown inside the field, left of the calendar icon, and only for that field 5. Click the cross => The date is cleared and the cross disappears 6. Compare with the selects of the form (for example Status): the cross and the toggle are in the same place 7. Run: $ yarn cypress run --spec t/cypress/integration/ERM/Agreements_spec.ts => SUCCESS: Tests pass! Assisted-by: Sonnet 5.5 (Anthropic) Signed-off-by: Brendan Lawlor <blawlor@clamsnet.org> Signed-off-by: Anna Stalter <staltera@hamiltoneastpl.org> Signed-off-by: Martin Renvoize <martin.renvoize@openfifth.co.uk> -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.