From 39af33a415ba3337cf0c5f70d98659c96eeca613 Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Thu, 11 May 2023 14:30:08 +1000
Subject: [PATCH] fix(#632): add passthrough attrs to DruxtField (#633)

---
 .changeset/big-worms-punch.md                             | 5 +++++
 packages/entity/src/components/DruxtField.vue             | 8 ++++----
 .../test/components/__snapshots__/DruxtField.test.js.snap | 8 ++++----
 3 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/big-worms-punch.md

diff --git a/.changeset/big-worms-punch.md b/.changeset/big-worms-punch.md
new file mode 100644
index 000000000..086e73744
--- /dev/null
+++ b/.changeset/big-worms-punch.md
@@ -0,0 +1,5 @@
+---
+"druxt-entity": patch
+---
+
+fix(#632): add passthrough attrs to DruxtField
diff --git a/packages/entity/src/components/DruxtField.vue b/packages/entity/src/components/DruxtField.vue
index 2590c60a8..0e47de3ef 100644
--- a/packages/entity/src/components/DruxtField.vue
+++ b/packages/entity/src/components/DruxtField.vue
@@ -292,7 +292,7 @@ export default {
           // File: View.
           if (this.isFile && schemaType === 'view') {
             return h('DruxtEntity', {
-              attrs,
+              attrs: { ...attrs, ...self.$attrs },
               props: {
                 langcode: this.lang,
                 type: item.type,
@@ -310,7 +310,7 @@ export default {
           // Image: View
           if (this.isImage && schemaType === 'view') {
             return h('DruxtEntity', {
-              attrs,
+              attrs: { ...attrs, ...self.$attrs },
               props: {
                 langcode: this.lang,
                 type: item.type,
@@ -352,7 +352,7 @@ export default {
           // Relationship: View.
           if (this.relationship && (item || {}).id && schemaType === 'view') {
             return h('DruxtEntity', {
-              attrs,
+              attrs: { ...attrs, ...self.$attrs },
               props: {
                 langcode: this.lang,
                 mode: this.schema.settings.display.view_mode || 'default',
@@ -365,7 +365,7 @@ export default {
           // Relationship: Form.
           if (this.relationship && (item || {}).id && schemaType === 'form') {
             return h('details', [h('DruxtEntityForm', {
-              attrs,
+              attrs: { ...attrs, ...self.$attrs },
               props: {
                 langcode: this.lang,
                 mode: this.schema.settings.display.view_mode || 'default',
diff --git a/packages/entity/test/components/__snapshots__/DruxtField.test.js.snap b/packages/entity/test/components/__snapshots__/DruxtField.test.js.snap
index be52e6d45..ae1570ccd 100644
--- a/packages/entity/test/components/__snapshots__/DruxtField.test.js.snap
+++ b/packages/entity/test/components/__snapshots__/DruxtField.test.js.snap
@@ -24,8 +24,8 @@ exports[`DruxtField fallback - form 1`] = `
 exports[`DruxtField file - view 1`] = `
 "<div data=\\"[object Object]\\">
   <div data=\\"[object Object]\\" errors=\\"\\" relationship=\\"true\\" schema=\\"[object Object]\\" value=\\"[object Object]\\">
-    <div>
-      <div entity=\\"[object Object]\\" value=\\"[object Object]\\"><a target=\\"_blank\\" href=\\"/sites/default/files/mediterranean-quiche-umami.jpg\\">mediterranean-quiche-umami.jpg</a></div>
+    <div data=\\"[object Object]\\">
+      <div data=\\"[object Object]\\" entity=\\"[object Object]\\" value=\\"[object Object]\\"><a target=\\"_blank\\" href=\\"/sites/default/files/mediterranean-quiche-umami.jpg\\">mediterranean-quiche-umami.jpg</a></div>
     </div>
   </div>
 </div>"
@@ -34,8 +34,8 @@ exports[`DruxtField file - view 1`] = `
 exports[`DruxtField image - view 1`] = `
 "<div data=\\"[object Object]\\">
   <div data=\\"[object Object]\\" errors=\\"\\" relationship=\\"true\\" schema=\\"[object Object]\\" value=\\"[object Object]\\">
-    <div>
-      <div entity=\\"[object Object]\\" value=\\"[object Object]\\"><img src=\\"/sites/default/files/mediterranean-quiche-umami.jpg\\"></div>
+    <div data=\\"[object Object]\\">
+      <div data=\\"[object Object]\\" entity=\\"[object Object]\\" value=\\"[object Object]\\"><img src=\\"/sites/default/files/mediterranean-quiche-umami.jpg\\"></div>
     </div>
   </div>
 </div>"