diff --git a/ui/src/components/view/DetailSettings.vue b/ui/src/components/view/DetailSettings.vue
index eaa446cddcf8..2817e1c2b5bd 100644
--- a/ui/src/components/view/DetailSettings.vue
+++ b/ui/src/components/view/DetailSettings.vue
@@ -176,6 +176,13 @@ export default {
       })
       this.disableSettings = (this.$route.meta.name === 'vm' && this.resource.state !== 'Stopped')
     },
+    filterOrReadOnlyDetails () {
+      for (var i = 0; i < this.details.length; i++) {
+        if (!this.allowEditOfDetail(this.details[i].name)) {
+          this.details.splice(i, 1)
+        }
+      }
+    },
     allowEditOfDetail (name) {
       if (this.resource.readonlyuidetails) {
         if (this.resource.readonlyuidetails.split(',').map(item => item.trim()).includes(name)) {
@@ -257,13 +264,16 @@ export default {
       }
       this.error = false
       this.details.push({ name: this.newKey, value: this.newValue })
+      this.filterOrReadOnlyDetails()
       this.runApi()
     },
     updateDetail (index) {
+      this.filterOrReadOnlyDetails()
       this.runApi()
     },
     deleteDetail (index) {
       this.details.splice(index, 1)
+      this.filterOrReadOnlyDetails()
       this.runApi()
     },
     onShowAddDetail () {