Fixed #3760 Fixed #2348 - Inplace: FocusTrap support

primefaces · Mar 17, 2023 · 6d4e489 · 6d4e489
1 parent dda3d44
commit 6d4e489
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/components/inplace/Inplace.spec.js b/components/inplace/Inplace.spec.js
@@ -60,7 +60,7 @@ describe('Inplace.vue', () => {
             },
             slots: {
                 display: `{{'Click to Edit'}}`,
-                content: `<InputText autoFocus />`
+                content: `<InputText autofocus />`
             }
         });
 
@@ -90,7 +90,7 @@ describe('Inplace.vue', () => {
             },
             slots: {
                 display: `{{'Click to Edit'}}`,
-                content: `<InputText autoFocus />`
+                content: `<InputText autofocus />`
             }
         });
 

diff --git a/components/inplace/Inplace.vue b/components/inplace/Inplace.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass" aria-live="polite">
+    <div v-focustrap :class="containerClass" aria-live="polite">
         <div v-if="!d_active" ref="display" :class="displayClass" :tabindex="$attrs.tabindex || '0'" role="button" @click="open" @keydown.enter="open" v-bind="displayProps">
             <slot name="display"></slot>
         </div>
@@ -12,6 +12,7 @@
 
 <script>
 import Button from 'primevue/button';
+import FocusTrap from 'primevue/focustrap';
 
 export default {
     name: 'Inplace',
@@ -84,6 +85,9 @@ export default {
     },
     components: {
         IPButton: Button
+    },
+    directives: {
+        focustrap: FocusTrap
     }
 };
 </script>