Date UI is not reset when switching between two date columns

[richardolsson]

Description

Changes were recently made to the configuration UI for date columns during import (#1981 followed by #2387). Since the latter, there is no longer a default format, and the format must be manually selected before proceeding.

Many import use cases will contain multiple dates (e.g. date of birth and join date). In those situations, there seems to be a bug causing state not to be properly reset between the configuration UIs, so that when configuring one after the other the UI still represents the state of the former after selecting the latter.

Steps to reproduce

Make sure correct data exists

Make sure that you have an organization with more than one date field. At the time of writing, I have created a second date field in test organization 1 on the dummy server, so that there are two.

To verify that this is still the case, go to https://app.dev.zetkin.org/organize and sign in as [email protected], then browse to https://app.dev.zetkin.org/api/orgs/1/people/fields and verify that more than one field has type: "date".

If necessary, create a new field using this JS in the browser console:

fetch('/api/orgs/1/people/fields', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: 'Second date', slug: 'second_date', type: 'date', }) })

Reproduce bug

1. Go to https://app.dev.zetkin.org/organize/1/people and sign in using [email protected]
2. Click on Create
3. Click on "Import people"
4. Drag and drop the sample file below
5. Map FNAME to First Name
6. Map LNAME to Last Name
7. Click the checkbox next to BORN (but do not configure it yet)
8. Click the checkbox next to DIED (but do not configure it yet)
9. In the drop-down next to BORN, select "Extra date" and note what the UI looks like when it's not yet configured
10. Configure the date to use format YYYY-MM-DD
11. In the drop-down next to "DIED", select "Second date"

Sample file (CSV)

FNAME,LNAME,BORN,DIED
Clara,Zetkin,1857-07-05,1933-06-20

Expected Behaviour

The configuration UI for date fields should reset on the right hand side, to reflect the state of the DIED column which is not yet configured. The mapping row (on the left) should reflect that it's not yet configured.

Actual Behaviour

The configuration UI does not reset, so it looks like it's configured even if it's not. The mapping row (on the left) correctly reflects that it's not yet configured, but this conflicts with the state displayed on the right.

Screenshots (if you have any)

UI state after mapping first column (step 9)

UI state after configuring it (step 10)

UI state after mapping second column (step 11) but before configuring it