Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Touch UI Pathfield - 'disabled' property not working

Avatar

Level 2

Hi All,

we are moving from Classic UI to touch UI on AEM 6.3 SP1. One of our touch ui component field has resource type as "granite/ui/components/coral/foundation/form/pathfield". As per Granite UI 1.0 documentation, when we apply disabled="{Boolean}true" property on pathfield, it does not disable the pathfield on dialog.

1580514_pastedImage_2.png

1 ] In browser developer tool I can see "disabled" attribute is present for pathfield

1580515_pastedImage_3.png

2] I edited "disabled" attribute in browser developer tool as "disabled=true", this makes pathfield disabled.

1580537_pastedImage_5.png

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Whoever is following this thread, this issue can be fixed for all pathfield in dialog by creating clientlibs of category 'cq.authoring.dialog' with below generic code.

(function($, $document) {

    "use strict";

    $document.on("dialog-ready", function() {

        var pathfieldVar = $('foundation-autocomplete[disabled]')

        pathfieldVar.each(function() {

            $(this).removeAttr("disabled");

            $(this).attr("disabled", "disabled");

        });

    });

})($, $(document));



Arun Patidar

View solution in original post

4 Replies

Avatar

Community Advisor

Hi,

The way disabled attributed added it works but here the issue is with input field which render later. To fix this issue you can write javascript to add disabled attribute to input field as well or remove and then add disabled attribute after dialog ready.



Arun Patidar

Avatar

Community Advisor

below is sample code :

(function($, $document) {

    "use strict";

    $document.on("dialog-ready", function() {

        var pathfieldVar = $('foundation-autocomplete[name="./linkPath1"]')

        if (typeof pathfieldVar !== 'undefined' || pathfieldVar !== null) {

            if (pathfieldVar.attr("disabled") == "disabled") {

                pathfieldVar.removeAttr("disabled");

                pathfieldVar.attr("disabled", "disabled");

            }

        }

    });

})($, $(document));



Arun Patidar

Avatar

Correct answer by
Community Advisor

Whoever is following this thread, this issue can be fixed for all pathfield in dialog by creating clientlibs of category 'cq.authoring.dialog' with below generic code.

(function($, $document) {

    "use strict";

    $document.on("dialog-ready", function() {

        var pathfieldVar = $('foundation-autocomplete[disabled]')

        pathfieldVar.each(function() {

            $(this).removeAttr("disabled");

            $(this).attr("disabled", "disabled");

        });

    });

})($, $(document));



Arun Patidar