How to disable an editableList

[BartButenaers]

Hi folks,

In my latest node I have an editableList, which needs to be disabled somehow when the config screen of my node has been opened. Afterwards they editableList can be enabled, based on the user actions.

However I don't know how to do this.

• I have tried to disable it or set a grey background color, but none of those works:

  // The editable list should be disabled, until a trace has been selected
  myEditableList.prop('disabled', true);
  myEditableList.css('background-color', "f9f9f9");
  

  When Node-RED injects here extra elements, I can set the background color of the new element (with class red-ui-editableList-container) to grey. Then it looks disabled, but not sure any of this is possible programmatically ...

• When I show an alert within the addItem function, an empty row will be added anyway:

  var myEditableList = $("#node-input-properties-container").editableList({
     addItem: function(container,i,property) {
         if (...) {
           alert("Not possible to add items now!");
           return false;
        }
  

  The result:

  

  A return false or throw "some error doesn't prevent the empty line being added ...

Does anybody know a decent way to avoid items being added, and to give the editableList somehow a disabled look?

Thanks !!
Bart

[Steve-Mcl]

Hi Bart, as editableList is a widget, there are methods provided for you to call like this...
$("#node-input-properties-container").editableList("disable",true);
... however, this method has to be provided by the widget creator.

This is the current methods available to editableList ...

node-red/node-red/blob/ec368ae3fd24dcb688f2918e25bb04d62fafc798/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js#L33

There doesnt appear to be a "disable" or "enable" or "inhibit" method provided.

Off the top of my head, two options...

1. Add a disable method to the editableList and raise a PR back to core
2. Hack it. ...
   1. find the "add" button and disable it (or hide it): $("#node-input-properties-container").parent().next("a.red-ui-editableList-addButton").css("pointer-events","none")
   2. find the ol and disable pointer events: $("#node-input-properties-container").css("pointer-events","none")

For me, option 1 is the better solution as class names might change in the future and your solution would break.

PS, the selector could probably be a bit more generic (like find last anchor - would solve future class name changes however if the button was moved in the widget source, you might get the delete anchor of the last item in the list. As I said, option 1 is better).

PS2, it goes without saying you would want to discuss this with Dave and Nick before raising a PR.

[BartButenaers]

@Steve-Mcl

raise a PR back to core

Hey Steve,
Thanks for the feedback. Yes I had also seen that the disable method was missing. But I'm already dying this week of CSS stuff, so not sure whether I can handle this one...

[Steve-Mcl]

Well, you can always do the hack I suggested until someone gets around to it - will tide you over / give you the functionality you need.