Join Forms: Enum Fields Rendered As Text Inputs
Description
The Feature
"Join forms" in Zetkin is a feature that allows an organizer to create embeddable forms that, when filled out, result in a new person record being created in the organization. A join form is configured to contain certain fields that map directly to fields on the organization's person data model. This feature is a powerful tool for organizers to collect information from individuals who want to join their organization.
Fields in Zetkin are often categorized into one of two categories. Native fields are the fields that exist on person objects in all Zetkin organizations, such as first and last name, email address, phone number, etc. These fields are common to all organizations and are used to store basic information about individuals. On the other hand, Custom fields are a feature to create custom fields in a specific organization, and to optionally share those with all sub-organizations. Custom fields have types such as date, text, or "enum," where the enum type means that the field can only have a pre-defined set of values. In the Zetkin organizer UI, enum fields are rendered as a drop-down, making it easy for users to select from a list of permitted values.
The Bug
When an enum field is used in a join form, it's rendered on the embeddable, front-facing page as a text input. This makes it basically impossible to input a valid value, because the user will not know the exact spelling of the necessary values, much less the technical "key" of each value. This bug is a significant issue, as it prevents users from accurately completing the join form, which can lead to errors and inconsistencies in the organization's data.
The Impact
The impact of this bug is significant, as it affects the accuracy and completeness of the organization's data. When users are unable to select from a list of permitted values, they may enter incorrect information, which can lead to errors and inconsistencies in the organization's data. This can have serious consequences, such as incorrect billing or payment information, or even security breaches.
Steps to Reproduce
Step 1: Access the Zetkin Organizer UI
To reproduce this bug, you will need to access the Zetkin organizer UI. You can do this by visiting the following URL: https://app.dev.zetkin.org/organize/1/people. Sign in as an admin to access the UI.
Step 2: Create a New Join Form
Once you have accessed the Zetkin organizer UI, create a new join form by clicking on the "Create Join Form" button. This will take you to a new page where you can configure the join form.
Step 3: Add an Enum Field to the Join Form
To reproduce this bug, you will need to add an enum field to the join form. To do this, click on the "Add Field" button and select "Enum" as the field type. This will add a new field to the join form that is rendered as a drop-down in the Zetkin organizer UI.
Step 4: Save the Join Form
Once you have added an enum field to the join form, save the form by clicking on the "Save" button. This will take you back to the list of forms.
Step 5: Copy the Embed URL
To reproduce this bug, you will need to copy the embed URL of the join form. To do this, click on the ellipsis menu (three dots on the right-hand side of the list) and select "Copy Embed URL." This will copy the URL to your clipboard.
Step 6: Visit the Embed URL
Once you have copied the embed URL, visit the URL by clicking on the button in the toast or by opening a new window and pasting the URL. This will take you to the embeddable form.
Expected Behaviour
The embeddable form should render in your browser, and the enum field should be rendered as a drop-down with the permitted values. This is the expected behavior, as enum fields are rendered as drop-downs in the Zetkin organizer UI.
Actual Behaviour
The embeddable form is rendered in your browser, but the enum field is rendered as a simple input. This is the actual behavior, which is different from the expected behavior.
Screenshots
Finding the Embed URL (Step 5-6)
Rendered Form with Input Field
Conclusion
Frequently Asked Questions
Q: What is the issue with enum fields in join forms?
A: The issue is that enum fields are rendered as text inputs instead of drop-downs, making it difficult for users to select from a list of permitted values.
Q: Why is this a problem?
A: This is a problem because users may enter incorrect information, which can lead to errors and inconsistencies in the organization's data. This can have serious consequences, such as incorrect billing or payment information, or even security breaches.
Q: How can I reproduce this bug?
A: To reproduce this bug, follow the steps outlined in the "Steps to Reproduce" section of the article. This includes creating a new join form, adding an enum field, saving the form, copying the embed URL, and visiting the embed URL.
Q: What is the expected behavior for enum fields in join forms?
A: The expected behavior is that enum fields should be rendered as drop-downs with the permitted values.
Q: What is the actual behavior for enum fields in join forms?
A: The actual behavior is that enum fields are rendered as simple inputs, making it difficult for users to select from a list of permitted values.
Q: How can I fix this bug?
A: To fix this bug, you will need to update the Zetkin code to render enum fields as drop-downs instead of text inputs. This may require changes to the front-end code, back-end code, or both.
Q: What are the consequences of not fixing this bug?
A: The consequences of not fixing this bug are that users may enter incorrect information, which can lead to errors and inconsistencies in the organization's data. This can have serious consequences, such as incorrect billing or payment information, or even security breaches.
Q: Can I work around this bug by using a different field type?
A: Yes, you can work around this bug by using a different field type, such as a text field or a date field. However, this may not be a suitable solution, as it may not meet the requirements of your organization.
Q: Is this bug specific to join forms or can it occur in other forms as well?
A: This bug can occur in other forms as well, not just join forms. However, the impact of this bug may be more significant in join forms, as they are used to collect information from individuals who want to join the organization.
Troubleshooting Tips
Tip 1: Check the field type
Make sure that the field type is set to "enum" and not "text" or any other type.
Tip 2: Check the permitted values
Make sure that the permitted values are set correctly and are not empty.
Tip 3: Check the front-end code
Make sure that the front-end code is rendering the enum field as a drop-down and not as a text input.
Tip 4: Check the back-end code
Make sure that the back-end code is sending the correct data to the front-end code to render the enum field as a drop-down.
Conclusion
In conclusion, the bug in Zetkin's join forms is a significant issue that affects the accuracy and completeness of the organization's data. By understanding the issue, reproducing the bug, and troubleshooting the problem, you can take steps to fix this bug and ensure the accuracy and completeness of the organization's data.