Defect date field in forms

[tzmn27]

Environment (Required on creation)

Camunda 7.19-7.22

JDK 17
Camunda run 7.21.0
Camunda Modeler 5.23
Tested on Edge and Chrome

Description (Required on creation; please attach any relevant screenshots, stacktraces, log files, etc. to the ticket)

I run into an issue with the date field in a form. When i am starting the task, the date field appears but i can’t save any entered value. If i set the field on required, i can’t complete the task, no matter of the input in the field. Also, the datepicker popup does not appear, like in the preview of the Modeler. The other input fields seem to work.

Steps to reproduce (Required on creation)

From my GitHub project start the process 'Thesis' and enter data to proceed.

Observed Behavior (Required on creation)

Date field pop-up does not work, if set on required can't proceed

Expected behavior (Required on creation)

Date field popup works and after entering a date, completion of the form is possible

Root Cause (Required on prioritization)

flatpickr, a transitive dependency of form-js is not available after the webpack build. Gets tree shaken.

In 7.19 it looks like only the styles are missing, the date picker is kind of shown:

Solution Ideas

Add flatpickr to the webpack config similar to preact-markup and co.

Hints

Links

Forum
https://forum.camunda.io/t/form-date-field-not-working-properly/52873
GitHub
https://github.com/tzmn27/Thesis

Breakdown

Pull Requests

Beta Give feedback

1. fix(webapp): fix formjs date picker error #4456
   ci:e2e +1
   
2. https://github.com/camunda/camunda-bpm-platform-ee/pull/955

Dev2QA handover

• Does this ticket need a QA test and the testing goals are not clear from the description? Add a Dev2QA handover comment

[danielkelemen]

Hi @tzmn27,

Thank you for reporting a bug and providing an example as well!
I will test it soon and provide more feedback.

-Daniel

[tzmn27]

Hi @danielkelemen,

do you have any update on that issue?

-Thomas

[danielkelemen]

Hi @tzmn27,
I updated the issue. It is indeed a bug in our packaging.
We will prioritize this and then provide a fix.
-Daniel

[danielkelemen]

@tasso94, assigning for prioritization. It's a bug with date fields in forms. It's happening with all webpack versions and 7.19 also contains a styles bug with flatpickr.

[tasso94]

Thanks! Let's try to fix it in the course of 7.22.0. We can consider backporting it.

[venetrius]

Merged to master, will keep in review until decided to be backproted or not.

[venetrius]

Moved to QA, will not be back ported unless required by customer.

[tasso94]

@danielkelemen, do you have any idea why we have these tree-shaking issues only with form-js and not with any other library? 🤔

camunda-bpm-platform/webapps/frontend/webpack.common.js

Lines 100 to 111 in f37877b

	// prevent ids from being tree shaken (transitive dependency of form-js)
	ids: path.resolve(__dirname, 'node_modules/ids/dist/index.umd.js'),
	// prevent`preact-markup`being tree shaken (transitive dependency of form-js
	'preact-markup': path.resolve(
	__dirname,
	'node_modules/preact-markup/dist/preact-markup.umd.js'
	),
	// prevent `flatpickr` being tree shaken (transitive dependency of form-js)
	flatpickr: path.resolve(
	__dirname,
	'node_modules/flatpickr/dist/flatpickr.js'
	)

[danielkelemen]

@danielkelemen, do you have any idea why we have these tree-shaking issues only with form-js and not with any other library? 🤔

@tasso94, no idea. The CommonJS file is defined in their package properly, flatpickr is required and used.

[gbetances089]

Tested on: camunda-bpm-run-ee-7.22.0-20240817.170611-72

Also added an e2e test to validate the functionality of the datepicker on camunda forms