1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Merge pull request #3159 from node-red/multi-select-typedInput

Do better remembering TypedInput values whilst switching types
This commit is contained in:
Nick O'Leary 2021-10-01 15:40:59 +01:00 committed by GitHub
commit 2bd7c4bc81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 9 deletions

View File

@ -428,6 +428,10 @@
this.optionExpandButton = $('<button tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"></button>').appendTo(this.uiSelect); this.optionExpandButton = $('<button tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"></button>').appendTo(this.uiSelect);
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);
// Used to remember selections per-type to restore them when switching between types
this.oldValues = {};
this.type(this.options.default||this.typeList[0].value); this.type(this.options.default||this.typeList[0].value);
}catch(err) { }catch(err) {
console.log(err.stack); console.log(err.stack);
@ -767,6 +771,24 @@
var that = this; var that = this;
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
var previousType = this.typeMap[this.propertyType];
var typeChanged = !!previousType;
if (typeChanged) {
if (previousType.options) {
this.oldValues[previousType.value] = this.input.val();
} else if (previousType.hasValue === false) {
this.oldValues[previousType.value] = this.input.val();
} else {
this.oldValues["_"] = this.input.val();
}
if (opt.options || opt.hasValue === false) {
this.input.val(this.oldValues.hasOwnProperty(opt.value)?this.oldValues[opt.value]:(opt.default||[]).join(","))
} else {
this.input.val(this.oldValues.hasOwnProperty("_")?this.oldValues["_"]:(opt.default||""))
}
}
this.propertyType = type; this.propertyType = type;
if (this.typeField) { if (this.typeField) {
this.typeField.val(type); this.typeField.val(type);
@ -865,8 +887,10 @@
// Check to see if value is a valid csv of // Check to see if value is a valid csv of
// options. // options.
var currentValues = {}; var currentValues = {};
var selected = [];
currentVal.split(",").forEach(function(v) { currentVal.split(",").forEach(function(v) {
if (v) { if (v) {
selected.push(v);
currentValues[v] = true; currentValues[v] = true;
} }
}); });
@ -875,9 +899,11 @@
delete currentValues[op.value||op]; delete currentValues[op.value||op];
} }
if (!$.isEmptyObject(currentValues)) { if (!$.isEmptyObject(currentValues)) {
selected = opt.default || [];
// Invalid, set to default/empty // Invalid, set to default/empty
this.value((opt.default||[]).join(",")); this.value(selected.join(","));
} }
that._updateOptionSelectLabel(selected);
} }
} else { } else {
var selectedOption = this.optionValue||opt.options[0]; var selectedOption = this.optionValue||opt.options[0];
@ -938,8 +964,6 @@
this.input.attr('type',this.defaultInputType) this.input.attr('type',this.defaultInputType)
} }
if (opt.hasValue === false) { if (opt.hasValue === false) {
this.oldValue = this.input.val();
this.input.val("");
this.elementDiv.hide(); this.elementDiv.hide();
this.valueLabelContainer.hide(); this.valueLabelContainer.hide();
} else if (opt.valueLabel) { } else if (opt.valueLabel) {
@ -952,10 +976,6 @@
this.elementDiv.hide(); this.elementDiv.hide();
opt.valueLabel.call(this,this.valueLabelContainer,this.input.val()); opt.valueLabel.call(this,this.valueLabelContainer,this.input.val());
} else { } else {
if (this.oldValue !== undefined) {
this.input.val(this.oldValue);
delete this.oldValue;
}
this.valueLabelContainer.hide(); this.valueLabelContainer.hide();
this.elementDiv.show(); this.elementDiv.show();
} }

View File

@ -81,7 +81,8 @@
z-index: 2000; z-index: 2000;
a { a {
padding: 6px 18px 6px 6px; padding: 6px 18px 6px 6px;
display: block; display: flex;
align-items: center;
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
color: $form-text-color; color: $form-text-color;
&:hover { &:hover {
@ -98,7 +99,7 @@
background: $workspace-button-background-active; background: $workspace-button-background-active;
} }
input[type="checkbox"] { input[type="checkbox"] {
margin-right: 6px; margin: 0 6px 0 0;
} }
} }
.red-ui-typedInput-icon { .red-ui-typedInput-icon {