diff --git a/site/gatsby-site/playwright/e2e-full/submit.spec.ts b/site/gatsby-site/playwright/e2e-full/submit.spec.ts
index 7fcf6fd818..cbeed641f0 100644
--- a/site/gatsby-site/playwright/e2e-full/submit.spec.ts
+++ b/site/gatsby-site/playwright/e2e-full/submit.spec.ts
@@ -1707,4 +1707,66 @@ test.describe('The Submit form', () => {
await expect(page.locator('.tw-toast:has-text("Report successfully added to review queue. You can see your submission")')).toBeVisible();
await expect(page.locator(':text("Please review. Some data is missing.")')).not.toBeVisible();
});
+
+ test('Should allow commas in developers, deployers, harmed_parties, and implicated_systems', async ({ page }) => {
+ await init();
+ await conditionalIntercept(
+ page,
+ '**/parseNews**',
+ () => true,
+ parseNews,
+ 'parseNews'
+ );
+
+ await trackRequest(
+ page,
+ '**/graphql',
+ (req) => req.postDataJSON().operationName == 'FindSubmissions',
+ 'findSubmissions'
+ );
+
+ await page.goto(url);
+
+ await waitForRequest('findSubmissions');
+
+ await page.locator('input[name="url"]').fill(
+ `https://www.arstechnica.com/gadgets/2017/11/youtube-to-crack-down-on-inappropriate-content-masked-as-kids-cartoons/`
+ );
+
+ await page.locator('button:has-text("Fetch info")').click();
+
+ await waitForRequest('parseNews');
+
+ await page.locator('[name="incident_date"]').fill('2020-01-01');
+
+ await expect(page.locator('.form-has-errors')).not.toBeVisible();
+
+ await page.locator('[data-cy="to-step-2"]').click();
+
+ await page.locator('[data-cy="to-step-3"]').click();
+
+ await page.locator('input[name="developers"]').fill('This developer has a comma in its name, test');
+ await page.keyboard.press('Enter');
+
+ await expect(page.locator('text=Each alleged Developer must have at least 3 characters and less than 200')).not.toBeVisible();
+
+ // Check for deployers field
+ await page.locator('input[name="deployers"]').fill('This deployer has a comma in its name, test');
+ await page.keyboard.press('Enter');
+ await expect(page.locator('text=Each alleged Deployer must have at least 3 characters and less than 200')).not.toBeVisible();
+
+ // Check for harmed_parties field
+ await page.locator('input[name="harmed_parties"]').fill('This harmed_parties has a comma in its name, test');
+ await page.keyboard.press('Enter');
+ await expect(page.locator('text=Each alleged Harmed parties must have at least 3 characters and less than 200')).not.toBeVisible();
+
+ await page.locator('input[name="implicated_systems"]').fill('This implicated_systems has a comma in its name, test');
+ await page.keyboard.press('Enter');
+ await expect(page.locator('text=Each alleged Implicated AI system must have at least 3 characters and less than 200')).not.toBeVisible();
+
+ await page.locator('button[type="submit"]').click();
+ await expect(page.locator('.tw-toast:has-text("Report successfully added to review queue. You can see your submission")')).toBeVisible();
+ await expect(page.locator(':text("Please review. Some data is missing.")')).not.toBeVisible();
+ });
+
});
\ No newline at end of file
diff --git a/site/gatsby-site/src/components/forms/SubmissionWizard/StepThree.js b/site/gatsby-site/src/components/forms/SubmissionWizard/StepThree.js
index 0ae8ff942d..599fdfc311 100644
--- a/site/gatsby-site/src/components/forms/SubmissionWizard/StepThree.js
+++ b/site/gatsby-site/src/components/forms/SubmissionWizard/StepThree.js
@@ -360,6 +360,7 @@ const FormDetails = ({
touched={touched}
values={values}
errors={errors}
+ splitChar={null}
/>
@@ -377,6 +378,7 @@ const FormDetails = ({
touched={touched}
values={values}
errors={errors}
+ splitChar={null}
/>
@@ -394,6 +396,7 @@ const FormDetails = ({
touched={touched}
values={values}
errors={errors}
+ splitChar={null}
/>
@@ -411,6 +414,7 @@ const FormDetails = ({
touched={touched}
values={values}
errors={errors}
+ splitChar={null}
/>
>
diff --git a/site/gatsby-site/src/components/forms/Tags.js b/site/gatsby-site/src/components/forms/Tags.js
index d9783d1ab8..fa073780b5 100644
--- a/site/gatsby-site/src/components/forms/Tags.js
+++ b/site/gatsby-site/src/components/forms/Tags.js
@@ -14,13 +14,20 @@ export default function Tags({
className,
allowNew = true,
stayOpen = false,
+ splitChar = ',',
}) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
const commitTag = (tag) => {
- const splitTags = tag.split(',').map((tag) => tag.trim());
+ let splitTags = [];
+
+ if (splitChar) {
+ splitTags = tag.split(splitChar).map((tag) => tag.trim());
+ } else {
+ splitTags = [tag.trim()];
+ }
onChange(value ? value.concat(splitTags) : splitTags);
ref.current.clear();
@@ -31,10 +38,12 @@ export default function Tags({
className={`Typeahead ${className || ''}`}
inputProps={{ id: inputId, name }}
onKeyDown={(e) => {
- if (e.key === ',') {
+ if (splitChar && e.key === splitChar) {
e.preventDefault();
}
- if (['Enter', ','].includes(e.key) && e.target.value) {
+ const splitChars = splitChar ? ['Enter', splitChar] : ['Enter'];
+
+ if (splitChars.includes(e.key) && e.target.value) {
commitTag(e.target.value);
}
}}
diff --git a/site/gatsby-site/src/components/forms/TagsControl.js b/site/gatsby-site/src/components/forms/TagsControl.js
index 45746b4a83..d52e4384c9 100644
--- a/site/gatsby-site/src/components/forms/TagsControl.js
+++ b/site/gatsby-site/src/components/forms/TagsControl.js
@@ -10,6 +10,7 @@ const TagsControl = ({
disabled = false,
options = undefined,
handleChange = undefined,
+ splitChar = ',',
}) => {
const {
0: { value },
@@ -36,6 +37,7 @@ const TagsControl = ({
disabled,
className,
options,
+ splitChar,
}}
/>
);
diff --git a/site/gatsby-site/src/components/forms/TagsInputGroup.js b/site/gatsby-site/src/components/forms/TagsInputGroup.js
index ace7382442..feecc0f71a 100644
--- a/site/gatsby-site/src/components/forms/TagsInputGroup.js
+++ b/site/gatsby-site/src/components/forms/TagsInputGroup.js
@@ -16,6 +16,7 @@ const TagsInputGroup = ({
disabled = false,
options = undefined,
popoverName = null,
+ splitChar = ',',
...props
}) => {
const [optional, setOptional] = useState(true);
@@ -42,7 +43,14 @@ const TagsInputGroup = ({
data-cy={props['data-cy']}
>