Touch UI Pathfield - 'disabled' property not working

[vikashy47555224]

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.

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

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

[arunpatidar]

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.

[arunpatidar]

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));

[arunpatidar · Accepted solution]

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));

[smacdonald2008]

Excellent information Arun!