fix: fix filepicker required label

bpmn-io · Feb 6, 2025 · 17103e4 · 17103e4
1 parent 80e4caa
commit 17103e4
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/packages/form-js-viewer/src/render/components/form-fields/FilePicker.js b/packages/form-js-viewer/src/render/components/form-fields/FilePicker.js
@@ -23,6 +23,8 @@ const EMPTY_ARRAY = [];
  * @property {string} [field.label]
  * @property {string} [field.accept]
  * @property {string|boolean} [field.multiple]
+ * @property {Object} [field.validate]
+ * @property {boolean} [field.validate.required]
  * @property {string} [value]
  *
  * @param {Props} props
@@ -33,8 +35,8 @@ export function FilePicker(props) {
   const fileInputRef = useRef(null);
   /** @type {import('../../FileRegistry').FileRegistry} */
   const fileRegistry = useService('fileRegistry', false);
-  const { field, onChange, domId, errors = [], disabled, readonly, required, value: filesKey = '' } = props;
-  const { label, multiple = false, accept = '' } = field;
+  const { field, onChange, domId, errors = [], disabled, readonly, value: filesKey = '' } = props;
+  const { label, multiple = false, accept = '', validate = {} } = field;
   /** @type {string} */
   const evaluatedAccept = useSingleLineTemplateEvaluation(accept, { debug: true });
   const evaluatedMultiple = useBooleanExpressionEvaluation(multiple);
@@ -80,7 +82,7 @@ export function FilePicker(props) {
 
   return (
     <div className={formFieldClasses(type, { errors, disabled, readonly })}>
-      <Label htmlFor={domId} label={label} required={required} />
+      <Label htmlFor={domId} label={label} required={validate.required} />
       <input
         type="file"
         className="fjs-hidden"
@@ -91,6 +93,7 @@ export function FilePicker(props) {
         multiple={evaluatedMultiple || undefined}
         accept={evaluatedAccept || undefined}
         onChange={onFileChange}
+        required={validate.required}
       />
       <div className="fjs-filepicker-container">
         <button

diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/FilePicker.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/FilePicker.spec.js
@@ -175,6 +175,27 @@ describe('FilePicker', function () {
     });
   });
 
+  it('should render with required validation', function () {
+    // when
+    createFilePicker({
+      field: {
+        ...defaultField,
+        label: 'My filepicker',
+        validate: {
+          required: true,
+        },
+      },
+      services: {
+        fileRegistry: getMockFileRegistry(),
+      },
+    });
+
+    // then
+    expect(screen.getByText('My filepicker')).to.exist;
+    expect(screen.getByText('*')).to.exist;
+    expect(container.querySelector('input')).to.have.property('required', true);
+  });
+
   describe('a11y', function () {
     it('should have no violations', async function () {
       // given