Readonly TypedInput

[BartButenaers]

Hi folks,

I need to display a constant value in a readonly TypedInput field.
Have tried to add the readonly attribute to the input field in a couple of ways:

• Directly in the html input definition:

  var val = $('<input type="text" class="red-ui-editor-type-json-editor-value" readonly>').css({width:w+"px"}).val(""+valValue).insertAfter(valueLabel).typedInput({
     types: types,
     default: valType
  });
  

• Afterwards by setting it as a property:

  var val = $('<input type="text" class="red-ui-editor-type-json-editor-value">').css({width:w+"px"}).val(""+valValue).insertAfter(valueLabel).typedInput({
     types: types,
     default: valType
  });
  val.prop("readonly",true);
  

But the TypedInput keeps being editable, and the readonly attribute is gone when I inspect the html in the Chrome Inspector...

When I add the readonly attribute manually via the Chrome Developer tools, then the TypedInput becomes readonly as expected!

Does anybody know how I can solve this?

Thanks!!!
Bart

[Steve-Mcl]

Hi Bart, I believe this feature would need to be implemented in typedInput.js where the widget is created.

then when implemented, you would call something like $("#my-typed-input").typedInput("disabled", true); (much like we do $("#my-typed-input").typedInput("type", "str") and $("#my-typed-input").typedInput("show"))

For now, you could hack it with something like...

function disableTypedInput(selector, disable) {
  $(selector).siblings(".red-ui-typedInput-container").css("pointer-events", disable ? "none" : "all");
}

disableTypedInput("#my-typed-input", true);//disable
disableTypedInput("#my-typed-input", false);//enable

You might even be able to extend the widget to achieve $("#my-typed-input").typedInput("disabled", true); but ultimately, I believe it (the functionality) needs to be implemented in the widgets src.

[BartButenaers]

Hey Steve,
thanks a lot for your time!! Don't know how you figure out those hacks...

Well I'm 'trying' to find some time to implement my first pull request for the Node-RED flow editor.
So I assume a hack of the TypedInput won't be a good strategy to get my PR ever merged

If you have an idea of how this could be implemented in the typedInput.js, then it would be appreciated if you could share it here. With a little luck, "He Who Must Not Be Named" is reading this discussion and can let us know whether your proposal might be accepted...

Or was it "He Who Must Not Be Mentioned"?

[Steve-Mcl]

If you were gonna do it in core, I 'd suggest adding CSS to set these based on the disabled attribute.

e.g...

Add to typedInput...

        disable: function(val) {
            if(val === true) {
                this.uiSelect.attr("disabled", "disabled");
            } else if (val === false) {
                this.uiSelect.attr("disabled", null); //remove attr
            } else {
                this.uiSelect.attr("disabled", val); //user value
            }
        },
        disabled: function() {
            return this.uiSelect.attr("disabled");
        }

below the hide function

and the scss to disable the buttons and inputs in typedInput.scss...

    &[disabled] {
        input, button {
            background: $secondary-background-inactive;
            pointer-events: none;
            cursor: not-allowed;
        }
    }

at line 28...

---

but get the OK from Nick or Dave before raising PR

[knolleary]

Worth a roll of the dice.

[BartButenaers]

@Steve-Mcl:
Works like a charm for my changes in the json editor:

@knolleary: do I need to create that PR on the "dev" branch. Or should I wait - it is not urgent since I can proceed now - until you have started working on Node-RED 1.3.0 in the dev branch?

[dceejay]

Forgive me asking... why do you need a typed input if the user can't change the type or edit the value ? why not just display the value ?

[BartButenaers]

Hey Dave,
I'm trying to implement JSON schema support in the JSON editor, i.e. only allow input which is allowed in the specified JSON schema. Which I will use afterwards in e.g. my Onvif nodes to build automatically an Onvif manager based on the Onvif schema.

Found yesterday that a JSON schema offers a const keyword.

For example I have a webshop with a product that has a constant price of 99 EUR (since my sales people cannot give discount on this product). So the JSON schema will contain a const item:

schema = {
   "$schema": "http://json-schema.org/draft-07/schema#",
   "$id": "http://example.com/product.schema.json",
   "title": "Product",
   "description": "A product from my little Node-RED webshop",
   "type": "object",
   "properties": {
      "productName": {
         "description": "Name of the product",
         "type": "string"
      },
      "price": {
         "description": "The price of the product",
         "type": "number",
         "const": 99
      },
}

I automatically generate items in the JSON editor. But as soon as I see the const keyword, I know that I need to show a readonly TypedInput number field. Because the user is not allowed to change it.

With Steve's fix this works fine: I just show the TypedInput field like normal, but this time it is disabled...

[BartButenaers]

So indeed like you say it is not really user input, but I simply want to show the value...

[Steve-Mcl]

Dave, in the past, when a related option was unchecked, I have resorted to hiding the related typedInput where ideally it would have disabled the input. I would like to see this capability of you guys will allow it.

[knolleary]

Being able to disable an input is an entirely standard and reasonable thing to be able to do. The TypedInput doesn't do it because we haven't had a need to do it and no-one has asked before.

But we really don't need to be discussing the why's of this.

@BartButenaers if there are other things like this you stumble over, then please do flag them up. And don't assume I read every post on the forum - if you want my input, mention me directly.

[knolleary]

Only just saw your specific question about where to target the PR.

As its 'new' functionality then please target dev - no need to wait for anything.

[BartButenaers]

Pull request submitted.

[BartButenaers]

I have created another pull-request to add those new methods to the API documentation page. I have also tried to update other missing TypedInput features on that page, so hopefully it is now complete again ..