diff --git a/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue b/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
index 1af38d0d23..1059a9408c 100644
--- a/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
+++ b/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
@@ -2,6 +2,7 @@
   <div
     :style="getOutStyleDefault(config.style)"
     class="component component-outer"
+    :class="{'component-active': filterActive}"
     @click="handleClick"
     @mousedown="elementMouseDown"
   >
@@ -75,19 +76,19 @@
 </template>
 
 <script>
-import { getStyle } from '@/components/canvas/utils/style'
+import {getStyle} from '@/components/canvas/utils/style'
 import runAnimation from '@/components/canvas/utils/runAnimation'
-import { mixins } from '@/components/canvas/utils/events'
-import { mapState } from 'vuex'
+import {mixins} from '@/components/canvas/utils/events'
+import {mapState} from 'vuex'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
 import EditBar from '@/components/canvas/components/editor/EditBar'
 import MobileCheckBar from '@/components/canvas/components/editor/MobileCheckBar'
 import CloseBar from '@/components/canvas/components/editor/CloseBar'
-import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { imgUrlTrans } from '@/components/canvas/utils/utils'
+import {hexColorToRGBA} from '@/views/chart/chart/util'
+import {imgUrlTrans} from '@/components/canvas/utils/utils'
 
 export default {
-  components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar },
+  components: {CloseBar, MobileCheckBar, DeOutWidget, EditBar},
   mixins: [mixins],
   props: {
     canvasId: {
@@ -134,7 +135,7 @@ export default {
     canvasStyleData: {
       type: Object,
       required: false,
-      default: function() {
+      default: function () {
         return {}
       }
     },
@@ -157,10 +158,13 @@ export default {
     }
   },
   computed: {
+    filterActive() {
+      return this.curComponent && this.config.id === this.curComponent.id && this.config.type === 'custom'
+    },
     chart() {
       if (this.config.propValue?.viewId) {
         const viewInfo = this.panelViewDetailsInfo[this.config.propValue.viewId];
-        return viewInfo?JSON.parse(viewInfo):null
+        return viewInfo ? JSON.parse(viewInfo) : null
       }
       return null
     },
@@ -320,7 +324,7 @@ export default {
       e.stopPropagation()
       const _this = this
       setTimeout(() => {
-        _this.$store.commit('setCurComponent', { component: _this.config, index: _this.index })
+        _this.$store.commit('setCurComponent', {component: _this.config, index: _this.index})
       }, 200)
     },
     showViewDetails(params) {
@@ -381,4 +385,12 @@ export default {
   width: 100% !important;
   height: 100% !important;
 }
+
+.component-outer {
+  transform: translate(0);
+}
+
+.component-active {
+  z-index: 1;
+}
 </style>