Adding html data attributes to the content part of a native field component within a resource tool on a show page doesn't work

[felixwatts]

trafficstars

Describe the bug

If I'm understand the docs then the code:

            <%= avo_show_field(
              :id, 
              as: :text, 
              html: {
                show: {
                  content: {
                    data: { foo_bar: "baz" }
                  }
                }
              }
            )
            %>

Should result in an HTML element with the attribute "data-foo-bar"="baz". But although the show field is rendered, the attribute is missing. Changing content to wrapper does render the attribute but on the wrong element.

Steps to Reproduce

• Create a Resource Tool
• Add the above field to it
• Add the tool to the show page of a resource
• Load that page in the browser

Expected behavior & Actual behavior

Somewhere in the HTML "data-foo-bar"="baz" should occur. but it doesn't.

Models and resource files

System configuration

Avo version: 3.0.2

Rails version: 7.1.3

Ruby version: 3.3.0

License type:

• [x] Community
• [ ] Pro
• [ ] Advanced

Are you using Avo monkey patches, overriding views or view components?

• [ ] Yes. If so, please post code samples.
• [x] No

Screenshots or screen recordings

Additional context

Impact

• [x] High impact (It makes my app un-usable.)
• [ ] Medium impact (I'm annoyed, but I'll live.)
• [ ] Low impact (It's really a tiny thing that I could live with.)

Urgency

• [x] High urgency (I can't continue development without it.)
• [ ] Medium urgency (I found a workaround, but I'd love to have it fixed.)
• [ ] Low urgency (It can wait. I just wanted you to know about it.)

[adrianthedev]

Thanks @felixwatts!

Yes, it seems the html attributes to content are not outputted anywhere.

Would you be able to help out with a PR?

Approach

Add the @field.get_html attribute like this one to somewhere around here, where it makes sense.

[felixwatts]

Hi @adrianthedev, thanks for getting back to me.

Apparently we do have an advanced license for Avo (email me for details [email protected]), so I might get around to submitting a PR for this eventually, but it would be nice if you guys could do it.

[adrianthedev]

Hey @felixwatts I checked the text field code and I don't know why you wouldn't want to add the attribute to the wrapper? I mean, if the attribute would have been added to the content, we'd have to wrap everything in a new div and add it there. Isn't that exactly like adding it to the wrapper?

[Paul-Bob]

I think we should tweak the docs.

There is this documented example on how to add attributes to fields show content but we never mention that show content only supports classes.

In the following example we can verify that html -> show -> content -> classes are applied correctly but html -> show -> content -> data is not.

On the wrapper both of them are applied.

field :id, as: :id, html: {
  show: {
    content: {
      classes: "bg-red-500",
      data: {some: "data"}
    },
    wrapper: {
      classes: "bg-blue-500",
      data: {another: "data"}
    }
  }
}

<div class="field-wrapper relative flex flex-col grow pb-2 md:pb-0 leading-tight min-h-14 h-full field-wrapper-layout-inline md:flex-row md:items-center field-wrapper-size-regular field-width-regular   bg-blue-500" style=" " data-field-id="id" data-field-type="id" data-resource-show-target="idIdWrapper" data-another="data">
  <div class="pt-4 flex self-start items-center flex-shrink-0 w-48 px-6 uppercase font-semibold text-gray-500 text-sm h-full md:pt-0 md:h-14 md:w-64" data-slot="label">
      Id
  </div>  
  <div class="flex-1 flex flex-row md:min-h-inherit py-2 px-6 bg-red-500" data-slot="value">
    <div class="self-center w-full  md:w-8/12 ">
      170
    </div>
  </div>
</div>