Merge pull request #3220 from node-red/ti-fixes

Fix TypedInput initialisation
This commit is contained in:
Nick O'Leary 2021-10-24 22:58:55 +01:00 committed by GitHub
commit 6b6ad47c35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 13 deletions

View File

@ -419,7 +419,8 @@
} }
nlsd = true; nlsd = true;
var that = this; var that = this;
this.identifier = this.element.attr('id') || "TypedInput-"+Math.floor(Math.random()*100);
if (this.options.debug) { console.log(this.identifier,"Create",{defaultType:this.options.default, value:this.element.val()}) }
this.disarmClick = false; this.disarmClick = false;
this.input = $('<input class="red-ui-typedInput-input" type="text"></input>'); this.input = $('<input class="red-ui-typedInput-input" type="text"></input>');
this.input.insertAfter(this.element); this.input.insertAfter(this.element);
@ -533,9 +534,9 @@
// explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline' // explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline'
this.optionSelectTrigger = $('<button tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="red-ui-typedInput-icon fa fa-caret-down"></i></span></button>').appendTo(this.uiSelect); this.optionSelectTrigger = $('<button tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="red-ui-typedInput-icon fa fa-caret-down"></i></span></button>').appendTo(this.uiSelect);
this.optionSelectLabel = $('<span class="red-ui-typedInput-option-label"></span>').prependTo(this.optionSelectTrigger); this.optionSelectLabel = $('<span class="red-ui-typedInput-option-label"></span>').prependTo(this.optionSelectTrigger);
RED.popover.tooltip(this.optionSelectLabel,function() { // RED.popover.tooltip(this.optionSelectLabel,function() {
return that.optionValue; // return that.optionValue;
}); // });
this.optionSelectTrigger.on("click", function(event) { this.optionSelectTrigger.on("click", function(event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@ -556,6 +557,7 @@
this.optionExpandButtonIcon = $('<i class="red-ui-typedInput-icon fa fa-ellipsis-h"></i>').appendTo(this.optionExpandButton); this.optionExpandButtonIcon = $('<i class="red-ui-typedInput-icon fa fa-ellipsis-h"></i>').appendTo(this.optionExpandButton);
this.type(this.options.default||this.typeList[0].value); this.type(this.options.default||this.typeList[0].value);
this.typeChanged = !!this.options.default;
}catch(err) { }catch(err) {
console.log(err.stack); console.log(err.stack);
} }
@ -857,27 +859,38 @@
} }
return v; return v;
} else { } else {
if (this.options.debug) { console.log(this.identifier,"----- SET VALUE ------",value) }
var selectedOption = []; var selectedOption = [];
var valueToCheck = value;
if (opt.options) { if (opt.options) {
var checkValues = [value]; if (opt.hasValue && opt.parse) {
var parts = opt.parse(value);
if (this.options.debug) { console.log(this.identifier,"new parse",parts) }
value = parts.value;
valueToCheck = parts.option || parts.value;
}
var checkValues = [valueToCheck];
if (opt.multiple) { if (opt.multiple) {
selectedOption = []; selectedOption = [];
checkValues = value.split(","); checkValues = valueToCheck.split(",");
} }
checkValues.forEach(function(value) { checkValues.forEach(function(valueToCheck) {
for (var i=0;i<opt.options.length;i++) { for (var i=0;i<opt.options.length;i++) {
var op = opt.options[i]; var op = opt.options[i];
if (typeof op === "string") { if (typeof op === "string") {
if (op === value || op === ""+value) { if (op === valueToCheck || op === ""+valueToCheck) {
selectedOption.push(that.activeOptions[op]); selectedOption.push(that.activeOptions[op]);
break; break;
} }
} else if (op.value === value) { } else if (op.value === valueToCheck) {
selectedOption.push(op); selectedOption.push(op);
break; break;
} }
} }
}) })
if (this.options.debug) { console.log(this.identifier,"set value to",value) }
this.input.val(value); this.input.val(value);
if (!opt.multiple) { if (!opt.multiple) {
if (selectedOption.length === 0) { if (selectedOption.length === 0) {
@ -902,15 +915,16 @@
return this.propertyType; return this.propertyType;
} else { } else {
var that = this; var that = this;
if (this.options.debug) { console.log(this.identifier,"----- SET TYPE -----",type) }
var previousValue = null; var previousValue = null;
var opt = this.typeMap[type]; var opt = this.typeMap[type];
if (opt && this.propertyType !== type) { if (opt && this.propertyType !== type) {
// If previousType is !null, then this is a change of the type, rather than the initialisation // If previousType is !null, then this is a change of the type, rather than the initialisation
var previousType = this.typeMap[this.propertyType]; var previousType = this.typeMap[this.propertyType];
var typeChanged = !!previousType;
previousValue = this.input.val(); previousValue = this.input.val();
if (typeChanged) { if (this.typeChanged) {
if (this.options.debug) { console.log(this.identifier,"typeChanged",{previousType,previousValue}) }
if (previousType.options && opt.hasValue !== true) { if (previousType.options && opt.hasValue !== true) {
this.oldValues[previousType.value] = previousValue; this.oldValues[previousType.value] = previousValue;
} else if (previousType.hasValue === false) { } else if (previousType.hasValue === false) {
@ -920,6 +934,7 @@
} }
if ((opt.options && opt.hasValue !== true) || opt.hasValue === false) { if ((opt.options && opt.hasValue !== true) || opt.hasValue === false) {
if (this.oldValues.hasOwnProperty(opt.value)) { if (this.oldValues.hasOwnProperty(opt.value)) {
if (this.options.debug) { console.log(this.identifier,"restored previous (1)",this.oldValues[opt.value]) }
this.input.val(this.oldValues[opt.value]); this.input.val(this.oldValues[opt.value]);
} else if (opt.options) { } else if (opt.options) {
// No old value for the option type. // No old value for the option type.
@ -928,21 +943,28 @@
// nodes did before 2.1. // nodes did before 2.1.
// So we need to be careful to not reset the value if it is a valid option. // So we need to be careful to not reset the value if it is a valid option.
var validOptions = isOptionValueValid(opt,previousValue); var validOptions = isOptionValueValid(opt,previousValue);
if (previousValue && validOptions) { if (this.options.debug) { console.log(this.identifier,{previousValue,opt,validOptions}) }
if ((previousValue || previousValue === '') && validOptions) {
if (this.options.debug) { console.log(this.identifier,"restored previous (2)") }
this.input.val(previousValue); this.input.val(previousValue);
} else { } else {
if (typeof opt.default === "string") { if (typeof opt.default === "string") {
if (this.options.debug) { console.log(this.identifier,"restored previous (3)",opt.default) }
this.input.val(opt.default); this.input.val(opt.default);
} else if (Array.isArray(opt.default)) { } else if (Array.isArray(opt.default)) {
if (this.options.debug) { console.log(this.identifier,"restored previous (4)",opt.default.join(",")) }
this.input.val(opt.default.join(",")) this.input.val(opt.default.join(","))
} else { } else {
if (this.options.debug) { console.log(this.identifier,"restored previous (5)") }
this.input.val(""); this.input.val("");
} }
} }
} else { } else {
if (this.options.debug) { console.log(this.identifier,"restored default/blank",opt.default||"") }
this.input.val(opt.default||"") this.input.val(opt.default||"")
} }
} else { } else {
if (this.options.debug) { console.log(this.identifier,"restored old/default/blank") }
this.input.val(this.oldValues.hasOwnProperty("_")?this.oldValues["_"]:(opt.default||"")) this.input.val(this.oldValues.hasOwnProperty("_")?this.oldValues["_"]:(opt.default||""))
} }
if (previousType.autoComplete) { if (previousType.autoComplete) {
@ -950,6 +972,7 @@
} }
} }
this.propertyType = type; this.propertyType = type;
this.typeChanged = true;
if (this.typeField) { if (this.typeField) {
this.typeField.val(type); this.typeField.val(type);
} }
@ -1045,7 +1068,8 @@
} else { } else {
var selectedOption = this.optionValue||opt.options[0]; var selectedOption = this.optionValue||opt.options[0];
if (opt.parse) { if (opt.parse) {
var parts = opt.parse(this.input.val(),selectedOption); var selectedOptionObj = typeof selectedOption === "string"?{value:selectedOption}:selectedOption
var parts = opt.parse(this.input.val(),selectedOptionObj);
if (parts.option) { if (parts.option) {
selectedOption = parts.option; selectedOption = parts.option;
if (!this.activeOptions.hasOwnProperty(selectedOption)) { if (!this.activeOptions.hasOwnProperty(selectedOption)) {
@ -1069,6 +1093,7 @@
this._updateOptionSelectLabel(this.activeOptions[selectedOption]); this._updateOptionSelectLabel(this.activeOptions[selectedOption]);
} }
} else if (selectedOption) { } else if (selectedOption) {
if (this.options.debug) { console.log(this.identifier,"HERE",{optionValue:selectedOption.value}) }
this.optionValue = selectedOption.value; this.optionValue = selectedOption.value;
this._updateOptionSelectLabel(selectedOption); this._updateOptionSelectLabel(selectedOption);
} else { } else {