Read-only is not working in file-attachment

adobe · Apr 25, 2024 · 40371fb · 40371fb
1 parent 4d09843
commit 40371fb
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 9 deletions.
diff --git a/...content/jcr_root/content/forms/af/core-components-it/samples/fileinput/basic/.content.xml b/...content/jcr_root/content/forms/af/core-components-it/samples/fileinput/basic/.content.xml
@@ -72,6 +72,21 @@
                     tooltip="This is short description"
                     multiSelection="true"
                     type="file"/>
+             <fileinput5
+                    jcr:lastModified="{Date}2023-01-24T16:47:36.882+05:30"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="File Input - 5"
+                    sling:resourceType="forms-components-examples/components/form/fileinput"
+                    accept="[audio/*, video/*, image/*, text/*, application/pdf]"
+                    buttonText="Attach Files"
+                    enabled="{Boolean}true"
+                    fieldType="file-input"
+                    name="fileinput5"
+                    readOnly="{Boolean}true"
+                    textIsRich="[true,true]"
+                    type="file[]"
+                    visible="{Boolean}true"/>
             <submit
                     jcr:lastModified="{Date}2023-01-17T16:28:58.844+05:30"
                     jcr:lastModifiedBy="admin"

diff --git a/...fd/components/form/checkboxgroup/v1/checkboxgroup/clientlibs/site/js/checkboxgroupview.js b/...fd/components/form/checkboxgroup/v1/checkboxgroup/clientlibs/site/js/checkboxgroupview.js
@@ -156,7 +156,6 @@
         }
 
         updateEnabled(enabled, state) {
-            this.toggle(enabled, FormView.Constants.ARIA_DISABLED, true);
             this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_ENABLED, enabled);
             let widgets = this.widget;
             widgets.forEach(widget => {

diff --git a/...root/apps/core/fd/components/form/dropdown/v1/dropdown/clientlibs/site/js/dropdownview.js b/...root/apps/core/fd/components/form/dropdown/v1/dropdown/clientlibs/site/js/dropdownview.js
@@ -84,7 +84,6 @@
         }
 
         updateEnabled(enabled, state) {
-            this.toggle(enabled, FormView.Constants.ARIA_DISABLED, true);
             this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_ENABLED, enabled);
             let widget = this.widget;
             if (enabled === false) {

diff --git a/...t/apps/core/fd/components/form/fileinput/v2/fileinput/clientlibs/site/js/fileinputview.js b/...t/apps/core/fd/components/form/fileinput/v2/fileinput/clientlibs/site/js/fileinputview.js
@@ -86,6 +86,20 @@
             return this.element.querySelector(FileInputV2.selectors.attachButtonLabel);
         }
 
+        updateEnabled(enabled, state) {
+            if (this.widget) {
+                this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_ENABLED, enabled);
+                const isDisabled = !enabled || state.readOnly;
+                if (isDisabled) {
+                    this.widget.setAttribute("disabled", "disabled");
+                    this.widget.setAttribute(FormView.Constants.ARIA_DISABLED, true);
+                } else {
+                    this.widget.removeAttribute("disabled");
+                    this.widget.removeAttribute(FormView.Constants.ARIA_DISABLED);
+                }
+            }
+        }
+
         updateValue(value) {
             if (this.widgetObject == null) {
                 this.widgetObject = new FileInputWidget(this.widgetFields);

diff --git a/.../core/fd/components/form/radiobutton/v1/radiobutton/clientlibs/site/js/radiobuttonview.js b/.../core/fd/components/form/radiobutton/v1/radiobutton/clientlibs/site/js/radiobuttonview.js
@@ -94,7 +94,6 @@
         }
 
         updateEnabled(enabled, state) {
-            this.toggle(enabled, FormView.Constants.ARIA_DISABLED, true);
             this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_ENABLED, enabled);
             let widgets = this.widget;
             widgets.forEach(widget => {
@@ -110,7 +109,7 @@
             });
         }
 
-        updateReadOnly(readonly, state) {
+        updateReadOnly(readonly) {
             let widgets = this.widget;
             this.element.setAttribute(FormView.Constants.DATA_ATTRIBUTE_READONLY, readonly);
             widgets.forEach(widget => {

diff --git a/ui.frontend/src/view/FormFieldBase.js b/ui.frontend/src/view/FormFieldBase.js
@@ -415,7 +415,6 @@ class FormFieldBase extends FormField {
      */
     updateEnabled(enabled, state) {
         if (this.widget) {
-            this.toggle(enabled, Constants.ARIA_DISABLED, true);
             this.element.setAttribute(Constants.DATA_ATTRIBUTE_ENABLED, enabled);
             if (enabled === false) {
                 this.widget.setAttribute("disabled", "disabled");
@@ -432,7 +431,7 @@ class FormFieldBase extends FormField {
      * @param {boolean} readOnly - The read-only state.
      * @param {Object} state - The state object.
      */
-    updateReadOnly(readOnly, state) {
+    updateReadOnly(readOnly) {
         if (this.widget) {
             this.element.setAttribute(Constants.DATA_ATTRIBUTE_READONLY, readOnly);
             if (readOnly === true) {

diff --git a/ui.tests/test-module/specs/fileinput/fileinput.runtime.spec.js b/ui.tests/test-module/specs/fileinput/fileinput.runtime.spec.js
@@ -80,7 +80,7 @@ describe("Form with File Input - Basic Tests", () => {
     const checkHTML = (id, state) => {
         const visible = state.visible;
         const passVisibleCheck = `${visible === true ? "" : "not."}be.visible`;
-        const passDisabledAttributeCheck = `${state.enabled === false ? "" : "not."}have.attr`;
+        const passDisabledAttributeCheck = `${state.enabled === false || state.readOnly === true ? "" : "not."}have.attr`;
         const value = (state.value == null ? '' : (Array.isArray(state.value) ? state.value[0].name : state.value.name)); // check for file name in dom
         cy.get(`#${id}`)
             .should(passVisibleCheck)
@@ -138,7 +138,12 @@ describe("Form with File Input - Basic Tests", () => {
                 if (model.visible && model.enabled) {
                     cy.get(`#${id}`).should('have.class', 'cmp-adaptiveform-fileinput--empty');
                     cy.get(`#${id}`).invoke('attr', 'data-cmp-required').should('eq', 'false');
-                    cy.get(`#${id}`).invoke('attr', 'data-cmp-readonly').should('eq', 'false');
+                    if(model.readOnly) {
+                        cy.get(`#${id}`).should('have.attr', 'data-cmp-readonly', 'true');
+                    } else {
+                        cy.get(`#${id}`).should('have.attr', 'data-cmp-readonly', 'false');
+                    }
+                    //cy.get(`#${id}`).invoke('attr', 'data-cmp-readonly').should('eq', 'false');
                     cy.get(`#${id}`).find("input").attachFile(fileName).then(x => {
                         let expectedFileName = Array.isArray(model.getState().value) ? model.getState().value[0].name : model.getState().value.name;
                         expect(expectedFileName).to.equal(fileName)
@@ -148,7 +153,7 @@ describe("Form with File Input - Basic Tests", () => {
                 }
             }
         });
-        getFormObjTest(['empty.pdf', 'empty.pdf', 'empty.pdf', 'empty.pdf'])
+        getFormObjTest(['empty.pdf', 'empty.pdf', 'empty.pdf', 'empty.pdf', 'empty.pdf'])
     });
 
     it("should toggle description and tooltip", () => {
@@ -177,6 +182,11 @@ describe("Form with File Input - Basic Tests", () => {
         cy.get(".cmp-adaptiveform-fileinput__widgetlabel").should('have.attr', 'role', 'button');
     })
 
+    it(`fielinput is disabled when readonly property is true`, () => {
+        const fileInput5 =  "input[name='fileinput5']";
+        cy.get(fileInput5).should("have.attr", "disabled", "disabled"); 
+    });
+
 })
 
 describe("Form with File Input - Prefill & Submit tests", () => {