diff --git a/packages/storybook/stories/va-file-input-uswds.stories.jsx b/packages/storybook/stories/va-file-input-uswds.stories.jsx index d770c77dd..7c53fb623 100644 --- a/packages/storybook/stories/va-file-input-uswds.stories.jsx +++ b/packages/storybook/stories/va-file-input-uswds.stories.jsx @@ -24,7 +24,6 @@ const defaultArgs = { 'error': '', 'enable-analytics': false, 'hint': null, - 'multiple': false, 'uswds': true, 'vaChange': event => alert(`File change event received: ${event?.detail?.files[0]?.name}`), @@ -37,7 +36,6 @@ const Template = ({ error, required, hint, - multiple, 'enable-analytics': enableAnalytics, uswds, vaChange, @@ -50,7 +48,6 @@ const Template = ({ required={required} error={error} hint={hint} - multiple={multiple} enable-analytics={enableAnalytics} onVaChange={vaChange} uswds={uswds} @@ -81,13 +78,14 @@ AcceptsAnyKindOfImage.args = { accept: 'image/*', }; -export const AcceptsMultipleFiles = Template.bind(null); -AcceptsMultipleFiles.args = { - ...defaultArgs, - label: 'Input accepts multiple files', - hint: 'Select one or more files', - multiple: true, -}; +// Temporarily not supporting this option +// export const AcceptsMultipleFiles = Template.bind(null); +// AcceptsMultipleFiles.args = { +// ...defaultArgs, +// label: 'Input accepts multiple files', +// hint: 'Select one or more files', +// multiple: true, +// }; export const ErrorMessage = Template.bind(null); ErrorMessage.args = { diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts index a2412a2f0..be82b3e0c 100644 --- a/packages/web-components/src/components.d.ts +++ b/packages/web-components/src/components.d.ts @@ -434,10 +434,6 @@ export namespace Components { * The label for the file input. */ "label"?: string; - /** - * Optionally allow multiple files (USWDS Only) - */ - "multiple"?: boolean; /** * The name for the input element. */ @@ -2375,10 +2371,6 @@ declare namespace LocalJSX { * The label for the file input. */ "label"?: string; - /** - * Optionally allow multiple files (USWDS Only) - */ - "multiple"?: boolean; /** * The name for the input element. */ diff --git a/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts b/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts index 328bffe30..882feb4c7 100644 --- a/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts +++ b/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts @@ -5,7 +5,9 @@ const path = require('path'); describe('va-file-input', () => { it('renders', async () => { const page = await newE2EPage(); - await page.setContent(''); + await page.setContent( + '', + ); const element = await page.find('va-file-input'); expect(element).toEqualHtml(` @@ -23,7 +25,9 @@ describe('va-file-input', () => { it('displays an error message when `error` is defined', async () => { const page = await newE2EPage(); - await page.setContent(``); + await page.setContent( + ``, + ); const errorSpan = await page.find('va-file-input >>> #error-message'); expect(errorSpan.innerText.includes('This is an error')).toBe(true); @@ -48,18 +52,23 @@ describe('va-file-input', () => { it('renders a required span', async () => { const page = await newE2EPage(); - await page.setContent(``); + await page.setContent( + ``, + ); const requiredSpan = await page.find('va-file-input >>> .required'); expect(requiredSpan).not.toBeNull(); }); - it('the `multiple` attributes exists if set', async () => { + // Not supporting multiple for now + it.skip('the `multiple` attributes exists if set', async () => { const page = await newE2EPage(); - await page.setContent(``); + await page.setContent( + ``, + ); const fileInput = await page.find('va-file-input >>> input'); - expect(fileInput.getAttribute('multiple')).toBeTruthy; + expect(fileInput.getAttribute('multiple')).toBeTruthy(); }); it('the `multiple` attributes does not apply if omitted', async () => { @@ -67,15 +76,17 @@ describe('va-file-input', () => { await page.setContent(``); const fileInput = await page.find('va-file-input >>> input'); - expect(fileInput.getAttribute('multiple')).toBeFalsy; + expect(fileInput.getAttribute('multiple')).toBeFalsy(); }); it('the `accept` attribute exists if set', async () => { const page = await newE2EPage(); - await page.setContent(``); + await page.setContent( + ``, + ); const fileInput = await page.find('va-file-input >>> input'); - expect(fileInput.getAttribute('accept')).toBeTruthy; + expect(fileInput.getAttribute('accept')).toBeTruthy(); }); it('the `accept` attribute does not apply if omitted', async () => { @@ -83,7 +94,7 @@ describe('va-file-input', () => { await page.setContent(``); const fileInput = await page.find('va-file-input >>> input'); - expect(fileInput.getAttribute('accept')).toBeFalsy; + expect(fileInput.getAttribute('accept')).toBeFalsy(); }); it('emits the vaChange event only once', async () => { @@ -167,14 +178,15 @@ describe('va-file-input', () => { expect(requiredSpan).not.toBeNull(); }); - it('v3 the `multiple` attributes exists if set', async () => { + // Skipping temporarily while we are not supporting the multiple file upload option + it.skip('v3 the `multiple` attributes exists if set', async () => { const page = await newE2EPage(); await page.setContent( ``, ); const fileInput = await page.find('va-file-input >>> input'); - expect(fileInput.getAttribute('multiple')).toBeTruthy; + expect(fileInput.getAttribute('multiple')).toBeTruthy(); }); it('v3 the `multiple` attributes does not apply if omitted', async () => { @@ -182,7 +194,7 @@ describe('va-file-input', () => { await page.setContent(``); const fileInput = await page.find('va-file-input >>> input'); - expect(fileInput.getAttribute('multiple')).toBeFalsy; + expect(fileInput.getAttribute('multiple')).toBeFalsy(); }); it('v3 the `accept` attribute exists if set', async () => { @@ -192,7 +204,7 @@ describe('va-file-input', () => { ); const fileInput = await page.find('va-file-input >>> input'); - expect(fileInput.getAttribute('accept')).toBeTruthy; + expect(fileInput.getAttribute('accept')).toBeTruthy(); }); it('the `accept` attribute does not apply if omitted', async () => { @@ -200,7 +212,7 @@ describe('va-file-input', () => { await page.setContent(``); const fileInput = await page.find('va-file-input >>> input'); - expect(fileInput.getAttribute('accept')).toBeFalsy; + expect(fileInput.getAttribute('accept')).toBeFalsy(); }); // Skipping due to test flakiness, but this event does work in the browser diff --git a/packages/web-components/src/components/va-file-input/va-file-input-upgrader.ts b/packages/web-components/src/components/va-file-input/va-file-input-upgrader.ts index 26417b58a..a80e5ad44 100644 --- a/packages/web-components/src/components/va-file-input/va-file-input-upgrader.ts +++ b/packages/web-components/src/components/va-file-input/va-file-input-upgrader.ts @@ -365,7 +365,8 @@ const addPreviewHeading = (fileInputEl, fileNames) => { */ const handleChange = (e, fileInputEl, instructions, dropTarget) => { - const fileNames = e.target.files; + const multiple = fileInputEl.getAttribute('multiple'); // TODO: Double-check this works correctly when multiple is re-enabled + const fileNames = multiple ? e.target.files : [e.target.files[0]]; const inputParent = dropTarget.closest(`.${DROPZONE_CLASS}`); const statusElement = inputParent.querySelector(`.${SR_ONLY_CLASS}`); const fileStore = []; diff --git a/packages/web-components/src/components/va-file-input/va-file-input.tsx b/packages/web-components/src/components/va-file-input/va-file-input.tsx index 713aa6b8e..58f5d1a04 100644 --- a/packages/web-components/src/components/va-file-input/va-file-input.tsx +++ b/packages/web-components/src/components/va-file-input/va-file-input.tsx @@ -66,7 +66,7 @@ export class VaFileInput { /** * Optionally allow multiple files (USWDS Only) */ - @Prop() multiple?: boolean = false; + // @Prop() multiple?: boolean = false; NOTE: disabling temporarily /** * Emit component-library-analytics events on the file input change event. @@ -144,8 +144,7 @@ export class VaFileInput { } render() { - const { label, name, required, accept, error, hint, multiple, uswds } = - this; + const { label, name, required, accept, error, hint, uswds } = this; const text = this.getButtonText(); @@ -196,7 +195,6 @@ export class VaFileInput { type="file" name={name} accept={accept} - multiple={multiple} aria-describedby={ariaDescribedbyIds} onChange={this.handleChange} />