Text below field through plugin is not showing on page load

🆘 Support
1

Hi,

We are developing a plugin using the below link:
https://www.datocms.com/docs/plugin-sdk/react-datocms-ui.

On our plugin we want to show a text below one specific field. So we tried below code block:

overrideFieldExtensions(field: Field, ctx: FieldIntentCtx) {
    if ((field.attributes.api_key === "field_id") && (ctx.itemType.id.toString() === "model_id" || ctx.itemType.id.toString() === "model_id" || ctx.itemType.id.toString() === "model_id")
    ) {
      return {
        addons: [{ id: 'plugin_id' }],
      }
    }
  }

The issue is, the plugin is not showing the text on page load.
It is only showing the text if we focus in and focus out the target field.

Thanks,
Jyotirmoy Biswas

2

Hello @jyoti

If the field needs to have its focus removed and then focus again, the problem is probably inside the react component that is rendered on that field, can you send over that component so we can see if the problem could be there?

Also, as an additional note, inside the “if” on the second line, only the first condition should be sufficient to check the API key of the field and apply the component to it, the && and || don’t seem to be necessary

3

Hi,

Okay. We have fields with same api_key on different models. We were thinking of a control for showing the plugin text on specific model only.

Here is the code for the rendered react component:

import type {RenderFieldExtensionCtx} from 'datocms-plugin-sdk'
import React from 'react'
import {Canvas} from "datocms-react-ui";

type MapGrabProps = {
    ctx: RenderFieldExtensionCtx
}
const MapGrab = ({ctx}: MapGrabProps) => {
    /*let latLngPart = ''
    if(ctx && ctx.item && ctx.item.attributes.latitude && ctx.item.attributes.longitude){
        latLngPart = '&lat='+ctx.item.attributes.latitude+'&lng='+ctx.item.attributes.longitude
    }*/
    const url: any = ctx.plugin.attributes.parameters.mapUrl ?? ""

    return (
        <Canvas ctx={ctx}>
            <div style={{ marginBottom: 'var(--spacing-m)' }}>
                <b>Se kartet i fullskjerm:</b>&nbsp;&nbsp;&nbsp;
            <a
                rel="noopener noreferrer"
                style={{ textDecoration: 'none' }}
                target="_blank"
                href={url+"?testMode=1"}
            >
                {url}
            </a>
            </div>
        </Canvas>
    )
}

export default MapGrab

Thanks,
Jyotirmoy Biswas

4

I can’t really see the problem from the component, if the plugin repository is public, could you send over the link so i can try and reproduce the error locally?
If it is private send it over to support@datocms.com so we can take a closer look at it

Thank you!

5

Hi,

We have just shared the code of the plugin on support@datocms.com . The email is with the same subject of this topic.

Thanks,
Jyotirmoy Biswas