OH-Input field problem with variables in oh-context-component

Hello everyone,

I encounterd some problems with the oh-input-component in combination with oh-context-component. I hope you can help me! :slight_smile: Many thanks in advance!

Short description of my goal

I’m trying to create a custom widget with some input fields, which store its input values into some variables. These variables are defined in the oh-context component. At the end I want to send the JSON string of my variables with an oh-button to an item.

I stripped my widget down to just the bare minimum to show you the problem I encountered. The item in the parameters section is defined via “Set Props” in the left lower corner of the widget editor.

YAML Widget Code
uid: timeline_input_widget
tags: []
props:
  parameters:
    - context: item
      description: String-Item für neue Texteingabe
      label: Eingabe-Item
      name: inputItem
      required: true
      type: TEXT
timestamp: Mar 9, 2026, 6:31:55 AM
component: oh-context
config:
  variables:
    formData1:
      title: "This is the title of the card :-)"
      footer: "Text of Variable for footer!"
slots:
  default:
    - component: oh-input-card
      config:
        title: =vars.formData1.title
        footer: =vars.formData1.footer
        outline: true
        type: text
        inputmode: text
        variable: =vars.formData1
        variableKey: formData1.userResponse1
        

Initial case:

What I achieved so far: I can create the widget and initiate some variables with values. When I display these variables in my widget, the corresponding values will be shown. (See screenshot Heading and Footer of oh-input-card)

Weird case:

And now comes the weird thing for me: As long as I change some YAML code, the widget is rendered like in the screenshot above. As soon as I click “Redraw”, the input field disapears and I get an error message in my console as well as the HTML element for the input field disappears. See screenshot below:

The error message in the console:

index-D8m6Kk7Q.js:1070 TypeError: this.getVariableScope is not a function
    at Proxy.value (index-D8m6Kk7Q.js:43504:25)
    at nt (index-D8m6Kk7Q.js:372:19)
    at get value (index-D8m6Kk7Q.js:930:14)
    at Object.get [as value] (index-D8m6Kk7Q.js:1658:23)
    at index-D8m6Kk7Q.js:43650:110
    at r2 (index-D8m6Kk7Q.js:1148:14)
    at R (index-D8m6Kk7Q.js:1559:23)
    at index-D8m6Kk7Q.js:16339:9
    at r2 (index-D8m6Kk7Q.js:1148:14)
    at Ga (index-D8m6Kk7Q.js:2708:47)

Some sources

In the oh-input documentation for variableKey (variableKey) it is stated:

The inner property and its parent hierarchy will be created if missing.

Furthermore I found this github pull request for oh-context component from JustinGeorgi (GitHub PR Request). In this PR the feature I want to use, is described and tested. I don’t understand, why it is not working on my site.

Code Snippet from PR request
- component: oh-input-card
      config:
        title: Input global fruit
        type: text
        variable: currentFruit
        placeholder: Please select a fruit

This is probably worth filing an issue. There have been some significant refactors of the widget variable code in the last 6 months so it is possible that this is a bug that has crept in.

Please tell us the openHAB version you are using.

Thank you @JustinG for your reply and your thoughts.

I will try to have a deeper look into this topic the following days.

I’m using openHAB 5.1.1 Release Build, Main UI Commit 88ebe7ee

In that case please update to latest 5.1.x

I updated succesfully to following version: openHAB 5.1.3 Release Build, Main UI Commit f18caf73

Unfortunately the problem still occures.

I now saw, that there is an AI helper tool in the Chrome console. Maybe this explanation helps…

Chrome AI console feedback

Error message:

index-Buyt_kkZ.js:1070 TypeError: this.getLastVariableKeyValue is not a function
    at Proxy.value (index-Buyt_kkZ.js:43574:25)
    at nt (index-Buyt_kkZ.js:372:19)
    at get value (index-Buyt_kkZ.js:930:14)
    at Object.get [as value] (index-Buyt_kkZ.js:1658:23)
    at index-Buyt_kkZ.js:43716:110
    at r2 (index-Buyt_kkZ.js:1148:14)
    at R (index-Buyt_kkZ.js:1559:23)
    at index-Buyt_kkZ.js:16339:9
    at r2 (index-Buyt_kkZ.js:1148:14)
    at Ga (index-Buyt_kkZ.js:2708:47)

Explanation

Understanding the problem

The TypeError: this.getLastVariableKeyValue is not a function indicates that the code is attempting to call a method named getLastVariableKeyValue on an object referred to by this, but this object does not have such a method. This typically happens for one of two main reasons:

  • Incorrect this context: In JavaScript, the value of this is determined by how a function is called. If the function containing the call to this.getLastVariableKeyValue is not executed in the context of an object that does have this method, this will refer to something else (e.g., the global object in non-strict mode, undefined in strict mode, or another object entirely), leading to the error.

  • Method is not defined: The getLastVariableKeyValue method might simply not exist on the object it’s supposed to. This could be due to a typo in the method name, the method not being properly defined or imported, or the object being instantiated without the necessary method.

Given the stack trace points to Proxy.value (index-Buyt_kkZ.js:43574:25), it suggests this is likely happening within a component or module where this is expected to refer to the component instance or a specific class instance that should contain this method. The minified file index-Buyt_kkZ.js indicates a bundled application, making it harder to pinpoint the exact original source without debugging.

How to verify

To verify the cause, you can set a breakpoint at the line indicated in the error: index-Buyt_kkZ.js:43574:25. When the execution pauses at this breakpoint:

  • Inspect the value of this in the DevTools console.

  • Check if this has a property named getLastVariableKeyValue and if it is indeed a function.

This will help determine if this is the wrong object or if the method is simply missing from the expected object.

Suggested fix

The most common fixes involve ensuring the correct this context or defining the missing method:

1. Correcting this context

If this is incorrect, you might need to bind the function or use an arrow function:

a) Using bind(): If the function where this.getLastVariableKeyValue is called is passed as a callback, explicitly bind this to the correct context:

// Original (problematic)
someObject.doSomething(this.myFunction);

// Fix: Bind 'this'
someObject.doSomething(this.myFunction.bind(this));

b) Using an arrow function: Arrow functions lexically bind this, meaning this will refer to the this of the enclosing scope. If your problematic function is a method within a class or object, an arrow function can preserve the this context:

class MyClass {
  constructor() {
    this.value = 'example';
  }

  getLastVariableKeyValue() {
    return this.value;
  }

  // Original (problematic if not called directly on MyClass instance)
  // myMethod() {
  //   console.log(this.getLastVariableKeyValue());
  // }

  // Fix: Use an arrow function for methods that might lose 'this' context
  myMethod = () => {
    console.log(this.getLastVariableKeyValue());
  }
}

2. Defining the missing method

If getLastVariableKeyValue is genuinely missing from the object, ensure it is properly defined:

  • Check for typos: Double-check the method name for any spelling mistakes.

  • Verify object instantiation: Ensure the object is instantiated from a class or object literal that includes getLastVariableKeyValue.

  • Mixin/inheritance: If the method is expected from a mixin or inherited class, ensure the inheritance chain or mixin application is correct.

Since the provided code snippet is a utility function In and not directly related to this.getLastVariableKeyValue, the issue lies in the code calling In or further up the call stack, specifically at index-Buyt_kkZ.js:43574:25. You’ll need to examine the source code around that line in the unminified version (if available) or debug using the browser’s developer tools.

Summary

The TypeError: this.getLastVariableKeyValue is not a function means the object referred to by this does not possess the getLastVariableKeyValue method. This usually stems from an incorrect this context in the function call or the method simply not being defined on the object. Verify by inspecting this at the breakpoint, and fix by ensuring this is correctly bound or by defining the method where expected.

Console message

TypeError: this.getLastVariableKeyValue is not a function
    at Proxy.value (index-Buyt_kkZ.js:43574:25)
    at nt (index-Buyt_kkZ.js:372:19)
    at get value (index-Buyt_kkZ.js:930:14)
    at Object.get [as value] (index-Buyt_kkZ.js:1658:23)
    at index-Buyt_kkZ.js:43716:110
    at r2 (index-Buyt_kkZ.js:1148:14)
    at R (index-Buyt_kkZ.js:1559:23)
    at index-Buyt_kkZ.js:16339:9
    at r2 (index-Buyt_kkZ.js:1148:14)
    at Ga (index-Buyt_kkZ.js:2708:47)

Stacktrace

In @ index-Buyt_kkZ.js:1070
Fn @ index-Buyt_kkZ.js:1066
ga @ index-Buyt_kkZ.js:2508
s3 @ index-Buyt_kkZ.js:2181
run @ index-Buyt_kkZ.js:295
re2 @ index-Buyt_kkZ.js:2195
ne2 @ index-Buyt_kkZ.js:2147
A2 @ index-Buyt_kkZ.js:2139
h2 @ index-Buyt_kkZ.js:2057
s3 @ index-Buyt_kkZ.js:2182
run @ index-Buyt_kkZ.js:295
re2 @ index-Buyt_kkZ.js:2195
ne2 @ index-Buyt_kkZ.js:2147
A2 @ index-Buyt_kkZ.js:2139
h2 @ index-Buyt_kkZ.js:2057
D2 @ index-Buyt_kkZ.js:2101
te2 @ index-Buyt_kkZ.js:2137
h2 @ index-Buyt_kkZ.js:2054
D2 @ index-Buyt_kkZ.js:2101
te2 @ index-Buyt_kkZ.js:2137
h2 @ index-Buyt_kkZ.js:2054
D2 @ index-Buyt_kkZ.js:2101
T2 @ index-Buyt_kkZ.js:2082
w2 @ index-Buyt_kkZ.js:2079
h2 @ index-Buyt_kkZ.js:2057
s3 @ index-Buyt_kkZ.js:2182
run @ index-Buyt_kkZ.js:295
re2 @ index-Buyt_kkZ.js:2195
ne2 @ index-Buyt_kkZ.js:2147
A2 @ index-Buyt_kkZ.js:2139
h2 @ index-Buyt_kkZ.js:2057
D2 @ index-Buyt_kkZ.js:2101
te2 @ index-Buyt_kkZ.js:2137
h2 @ index-Buyt_kkZ.js:2054
D2 @ index-Buyt_kkZ.js:2101
te2 @

Related code

    function In(e2, t2, n2, r2=true, i2=false) {
        if (i2)
            throw e2;
        console.error(e2);
    }
    var Ln = []
      , Rn = -1
      , zn = []
      , Bn = null
      , Vn = 0
      , Hn = Promise.resolve()
      , Un = null;
    Wn = function(e2) {
        let t2 = Un || Hn;
        return e2 ? t2.then(this ? e2.bind(this) : e2) : t2;
    }
    ;

You should probably open an issue on the GitHub Openhab-WebUI site quoting this diagnostic information.

Either the issue is already there or do NOT create an issue, I’ll push a PR with a fix very shortly and it’s a pain getting issues created for stuff that is already fixed.

Fix: oh-input: Fix value computation for variables by florian-h05 · Pull Request #3978 · openhab/openhab-webui · GitHub

1 Like

Hi Florian,

thank you very much for the fix and the work you put in!

As soon as I can install the fixed version on my computers, I will respond with testing feedback.

1 Like

Hi @florian-h05 ,

I had a look into the GitHub PR you provided and saw, it was already merged into openhab:main.
I updated my openhab installation, but I stay at the same commit-state as last week (hope this wording is correct :confused: ). Is there a way to already install this newest version?

Can you please help me so I can help you with testing your fix :slight_smile:

Thank you in advance!

To which version??

OH-Input field problem with variables in oh-context-component - #7 by secureHAB

openHAB 5.1.3

Release Build

Main UI Commit f18caf73

5.1.3 doesn’t include the fix, it was released before the bug was even reported.

1 Like