tabshift/pocketbase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#7664] fixed codeEditor not firing the change and input events on autocomplete selection

Browse Source
This commit is contained in:
Gani Georgiev
2026-04-24 22:08:58 +03:00
parent fbeb09c40b
commit b5030ddfa1
6 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@@ -6,6 +6,8 @@
- Fixed SMTP IPv6 network address format ([#7659](https://github.com/pocketbase/pocketbase/issues/7659)).
- Fixed rule autocomplete not firing the related input event ([#7664](https://github.com/pocketbase/pocketbase/issues/7664)).
## v0.37.3

2
ui/dist/assets/index-CGid8tZ1.css → ui/dist/assets/index-DxJmEXiH.css vendored
View File

File diff suppressed because one or more lines are too long

4
ui/dist/assets/index-D8D-K7hW.js → ui/dist/assets/index-b7Yb7F-I.js vendored
View File

File diff suppressed because one or more lines are too long

4
ui/dist/index.html vendored
View File

@@ -13,9 +13,9 @@
<!-- prism -->
<script src="./libs/prism/prism.js" data-manual></script>
<script type="module" crossorigin src="./assets/index-D8D-K7hW.js"></script>
<script type="module" crossorigin src="./assets/index-b7Yb7F-I.js"></script>
<link rel="modulepreload" crossorigin href="./assets/pocketbase.es-B_4DUNUU.js">
<link rel="stylesheet" crossorigin href="./assets/index-CGid8tZ1.css">
<link rel="stylesheet" crossorigin href="./assets/index-DxJmEXiH.css">
</head>
<body>
</body>

33
ui/src/base/codeEditor.js
View File

@@ -41,9 +41,9 @@ window.app.components.codeEditor = function(propsArg = {}) {
// ]
autocomplete: undefined, // Array<string|Object> | function(word): Array<string|Object>,
// ---
oninput: function(val, e) {},
onfocus: function(val, e) {},
onblur: function(val, e) {},
oninput: function(val) {},
onfocus: function(val) {},
onblur: function(val) {},
});
const extendWatchers = app.utils.extendStore(props, propsArg, "autocomplete");
@@ -121,6 +121,12 @@ window.app.components.codeEditor = function(propsArg = {}) {
isFieldVisible = true;
}
function updateValue(newVal) {
props.value = newVal;
props.oninput?.(props.value);
editorContent.dispatchEvent(new CustomEvent("change", { detail: props.value }));
}
let isCtrlOrCmdKey = false;
let valueWatcher;
@@ -155,8 +161,8 @@ window.app.components.codeEditor = function(propsArg = {}) {
valueWatcher?.unwatch();
closeAutocompleteDropdown();
},
onfocus: (e) => {
props.onfocus?.(props.value, e);
onfocus: () => {
props.onfocus?.(props.value);
},
onblur: (e) => {
// not blurred because of dropdown click
@@ -164,16 +170,12 @@ window.app.components.codeEditor = function(propsArg = {}) {
closeAutocompleteDropdown();
}
props.onblur?.(props.value, e);
props.onblur?.(props.value);
},
oninput: (e) => {
closeAutocompleteDropdown();
props.value = editorContent.textContent;
props.oninput?.(props.value, e);
editorContent.dispatchEvent(new CustomEvent("change", { detail: props.value }));
updateValue(editorContent.textContent);
if (!props.value?.length) {
editorContent.textContent = ""; // ensure that no comments, br, etc. tags are left
@@ -235,7 +237,8 @@ window.app.components.codeEditor = function(propsArg = {}) {
editorContent.textContent = editorContent.textContent.substring(0, match.start)
+ word
+ editorContent.textContent.substring(match.end + 1);
props.value = editorContent.textContent;
updateValue(editorContent.textContent);
try {
window
@@ -316,13 +319,13 @@ window.app.components.codeEditor = function(propsArg = {}) {
selection.modify("extend", "backward", "character");
if (selection.toString()[0] == "\t") {
selection.deleteFromDocument();
props.value = editorContent.textContent;
updateValue(editorContent.textContent);
} else {
// check ahead and restore
selection.modify("extend", "forward", "character");
if (selection.toString()[0] == "\t") {
selection.deleteFromDocument();
props.value = editorContent.textContent;
updateValue(editorContent.textContent);
}
}
@@ -335,7 +338,7 @@ window.app.components.codeEditor = function(propsArg = {}) {
range.deleteContents();
range.insertNode(document.createTextNode("\t"));
range.collapse();
props.value = editorContent.textContent;
updateValue(editorContent.textContent);
}
return;

2
ui/src/css/vars.css
View File

@@ -145,7 +145,7 @@
--surfaceAlt4Color: color-mix(in srgb, var(--surfaceColor), white 14%);
--surfaceAlt5Color: color-mix(in srgb, var(--surfaceColor), white 16%);
--surfaceTxtColor: #dedede;
--surfaceTxtColor: #e6e6e6;
--tooltipTxtColor: var(--surfaceTxtColor);
--surfaceTxtHintColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 45%);
--surfaceTxtDisabledColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 65%);