diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue
index 656d52ab4..710fa0248 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/items/item-edit.vue
@@ -43,9 +43,10 @@
           </f7-col>
         </f7-block>
       </f7-tab>
+
       <f7-tab id="code" @tab:show="() => { this.currentTab = 'code'; toYaml() }" :tab-active="currentTab === 'code'">
-        <f7-icon v-if="ready && !isEditable" f7="lock" class="float-right margin" style="opacity:0.5; z-index: 4000; user-select: none;" size="50" color="gray" :tooltip="notEditableMgs" />
-        <editor v-if="currentTab === 'code'" class="rule-code-editor" mode="application/vnd.openhab.item+yaml" :value="itemYaml" @input="onEditorInput" :read-only="item.editable === false" />
+        <f7-icon v-if="item.editable === false" f7="lock" class="float-right margin" style="opacity:0.5; z-index: 4000; user-select: none;" size="50" color="gray" :tooltip="notEditableMgs" />
+        <editor class="item-code-editor" mode="application/vnd.openhab.item+yaml" :value="itemYaml" @input="onEditorInput" :read-only="item.editable === false" />
       </f7-tab>
     </f7-tabs>
 
@@ -60,7 +61,7 @@
 </template>
 
 <style lang="stylus">
-.rule-code-editor.vue-codemirror
+.item-code-editor.vue-codemirror
   display block
   top calc(var(--f7-navbar-height) + var(--f7-tabbar-height))
   height calc(100% - 2*var(--f7-navbar-height))
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
index a29d6f610..e38ad2916 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
@@ -150,8 +150,8 @@
       </f7-tab>
 
       <f7-tab id="code" :tab-active="currentTab === 'code'">
-        <f7-icon v-if="thing && !thing.editable" f7="lock" class="float-right margin" style="opacity:0.5; z-index: 4000; user-select: none;" size="50" color="gray" :tooltip="notEditableMsg" />
-        <editor v-if="currentTab === 'code'" class="thing-code-editor" mode="application/vnd.openhab.thing+yaml" :value="thingYaml" :hint-context="{ thingType: thingType, channelTypes: channelTypes }" @input="(value) => thingYaml = value" :read-only="thing && !thing.editable" />
+        <f7-icon v-if="thing.editable === false" f7="lock" class="float-right margin" style="opacity:0.5; z-index: 4000; user-select: none;" size="50" color="gray" :tooltip="notEditableMsg" />
+        <editor class="thing-code-editor" mode="application/vnd.openhab.thing+yaml" :value="thingYaml" :hint-context="{ thingType: thingType, channelTypes: channelTypes }" @input="onEditorInput" :read-only="thing.editable === false" />
         <!-- <pre class="yaml-message padding-horizontal" :class="[yamlError === 'OK' ? 'text-color-green' : 'text-color-red']">{{yamlError}}</pre> -->
       </f7-tab>
     </f7-tabs>
@@ -350,6 +350,10 @@ export default {
         window.removeEventListener('keydown', this.keyDown)
       }
     },
+    onEditorInput (value) {
+      this.thingYaml = value
+      this.dirty = true
+    },
     switchTab (tab) {
       if (this.currentTab === tab) return
       if (this.currentTab === 'code') {