Hello,
I'm doing my testing with JET 4.0 in Chrome and it seems that the 'disabled' attribute is not respecting changes in a Knockout observable or computed variable for oj-options in an oj-menu. Here's my first try using a pureComputed:
view.html
<oj-input-text value="{{inputValue}}"></oj-input-text>
<oj-menu-button>
Menu
\<oj-menu slot="menu" style="display:none">
\<oj-option value="option1" disabled="\[\[optionDisabled\]\]">
\<span data-bind="text: 'Option - ' + optionDisabled()">\</span>
\</oj-option>
\</oj-menu>
</oj-menu-button>
viewModel.js
self.inputValue = ko.observable('test');
self.optionDisabled = ko.pureComputed(function() {
var disabled = true;
if(self.inputValue()){
disabled = false;
}
return disabled;
});
With that setup, I run the page and get this result:
Which is what I was expecting to start out. Now I remove the value from the input text and get this:
Note that the text on the menu option has changed to show the 'true' value, but the option is still enabled. Next, I changed the inputValue variable to default to empty and reran the page.
Option is disabled, which is exactly what I want. Now I enter a value into the input:
Again, the text on the menu option updated, but the option is still disabled.
Finally, I tried the same HTML code, but changed the JavaScript to use an observable and the observable.subscribe function to trigger the change.
viewModel.js
self.inputValue = ko.observable('');
self.optionDisabled = ko.observable(true);
self.inputValue.subscribe(function(newValue) {
if(newValue) {
self.optionDisabled(false);
} else {
self.optionDisabled(true);
}
});
I am still getting the same result where the disabled state is not changing.
Both of the above mentioned methods are working fine for controlling the disabled state of normal buttons and other input text fields, just not the oj-menu oj-options.