itembox value fields and editable-text tweaks
- fixed creator names text selection glitch (hide the comma instead of not displaying it + removed redundant value update that's no longer needed) - set selection direction in editableText on tab to not scroll to the end of input - added autocomplete to observedAttributes of editable-text to properly add autocomplete even if autocomplete params are set after the element has been rendered (which is needed for creator names). This fixes wrong Esc behavior that erases autocomplete fields instead of resetting to previous value. - fixed creator names autocomplete and type switch regression after the comma was removed
This commit is contained in:
parent
56cef1d504
commit
32bfc267a7
3 changed files with 14 additions and 15 deletions
|
@ -37,7 +37,8 @@
|
||||||
'aria-label',
|
'aria-label',
|
||||||
'aria-labelledby',
|
'aria-labelledby',
|
||||||
'value',
|
'value',
|
||||||
'nowrap'
|
'nowrap',
|
||||||
|
'autocomplete'
|
||||||
];
|
];
|
||||||
|
|
||||||
get noWrap() {
|
get noWrap() {
|
||||||
|
@ -188,7 +189,7 @@
|
||||||
this.classList.add("focused");
|
this.classList.add("focused");
|
||||||
// Select all text if focused via keyboard
|
// Select all text if focused via keyboard
|
||||||
if (!this.getAttribute("mousedown")) {
|
if (!this.getAttribute("mousedown")) {
|
||||||
this._input.select();
|
this._input.setSelectionRange(0, this._input.value.length, "backward");
|
||||||
}
|
}
|
||||||
this._input.dataset.initialValue = this._input.value;
|
this._input.dataset.initialValue = this._input.value;
|
||||||
});
|
});
|
||||||
|
|
|
@ -822,11 +822,6 @@
|
||||||
this.querySelectorAll("[ztabindex]").forEach((node) =>{
|
this.querySelectorAll("[ztabindex]").forEach((node) =>{
|
||||||
node.setAttribute("tabindex", 0);
|
node.setAttribute("tabindex", 0);
|
||||||
});
|
});
|
||||||
for (let elem of [...this.querySelectorAll("editable-text")]) {
|
|
||||||
if (!elem.getAttribute("autocomplete")) {
|
|
||||||
this.addAutocompleteToElement(elem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
addItemTypeMenu() {
|
addItemTypeMenu() {
|
||||||
|
@ -1204,7 +1199,6 @@
|
||||||
// Change if button position changes
|
// Change if button position changes
|
||||||
var creatorNameBox = row.querySelector(".creator-name-box");
|
var creatorNameBox = row.querySelector(".creator-name-box");
|
||||||
var lastName = creatorNameBox.firstChild;
|
var lastName = creatorNameBox.firstChild;
|
||||||
var comma = creatorNameBox.firstChild.nextSibling;
|
|
||||||
var firstName = creatorNameBox.lastChild;
|
var firstName = creatorNameBox.lastChild;
|
||||||
|
|
||||||
let tab;
|
let tab;
|
||||||
|
@ -1221,7 +1215,6 @@
|
||||||
|
|
||||||
// Hide first name field and prepend to last name field
|
// Hide first name field and prepend to last name field
|
||||||
firstName.hidden = true;
|
firstName.hidden = true;
|
||||||
comma.hidden = true;
|
|
||||||
|
|
||||||
if (!initial) {
|
if (!initial) {
|
||||||
var first = firstName.value;
|
var first = firstName.value;
|
||||||
|
@ -1273,7 +1266,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
firstName.hidden = false;
|
firstName.hidden = false;
|
||||||
comma.hidden = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Save the last-used field mode
|
// Save the last-used field mode
|
||||||
|
@ -1527,6 +1519,10 @@
|
||||||
else {
|
else {
|
||||||
valueElement.style.textAlign = 'left';
|
valueElement.style.textAlign = 'left';
|
||||||
}
|
}
|
||||||
|
if (!fieldName.includes("creator")) {
|
||||||
|
// autocomplete for creator names is added in addCreatorRow
|
||||||
|
this.addAutocompleteToElement(valueElement);
|
||||||
|
}
|
||||||
return valueElement;
|
return valueElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1580,9 +1576,8 @@
|
||||||
if (field == 'creator') {
|
if (field == 'creator') {
|
||||||
value = this.item.getCreator(creatorIndex)[creatorField];
|
value = this.item.getCreator(creatorIndex)[creatorField];
|
||||||
if (value === undefined) {
|
if (value === undefined) {
|
||||||
value = "";
|
elem.value = "";
|
||||||
}
|
}
|
||||||
elem.value = value;
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
value = this.item.getField(fieldName);
|
value = this.item.getField(fieldName);
|
||||||
|
@ -1787,10 +1782,10 @@
|
||||||
// Update the other label
|
// Update the other label
|
||||||
let label;
|
let label;
|
||||||
if (otherField == 'firstName') {
|
if (otherField == 'firstName') {
|
||||||
label = textbox.nextSibling.nextSibling;
|
label = textbox.nextSibling;
|
||||||
}
|
}
|
||||||
else if (otherField == 'lastName') {
|
else if (otherField == 'lastName') {
|
||||||
label = textbox.previousSibling.previousSibling;
|
label = textbox.previousSibling;
|
||||||
}
|
}
|
||||||
|
|
||||||
label.value = creator[otherField];
|
label.value = creator[otherField];
|
||||||
|
|
|
@ -190,7 +190,7 @@ item-box {
|
||||||
margin-inline-end: calc(max(0px, 4px - var(--editable-text-padding-inline)));
|
margin-inline-end: calc(max(0px, 4px - var(--editable-text-padding-inline)));
|
||||||
}
|
}
|
||||||
// Add comma when the last name is not focused
|
// Add comma when the last name is not focused
|
||||||
*[fieldMode="0"]:first-child:not(.focused) {
|
*[fieldMode="0"]:first-child {
|
||||||
position: relative;
|
position: relative;
|
||||||
&::after {
|
&::after {
|
||||||
content: ",";
|
content: ",";
|
||||||
|
@ -198,6 +198,9 @@ item-box {
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: var(--editable-text-padding-block);
|
bottom: var(--editable-text-padding-block);
|
||||||
}
|
}
|
||||||
|
&.focused::after {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue