[Bug]: Trouble adding custom component for property

[mattrochon]

Contact Details

No response

What happened?

On my user resource, I added an ephemeral field for password, as authentication is handled by a 3rd party.

It largely worked with no configuration, except that the browser things that because I have 'email' and 'password' int he form it should auto populate with my credentials.

I tried passing autocomplete="new-password" tot he props section of the property definition, but that attribute is not passed on to the react component.

From what I can tell, only these properties are passed on:

In another place, I found a component that seems like it should be passing on the property, but inspecting the element never showed the prop in question.

So, moving on, I followed the documentation at https://docs.adminjs.co/ui-customization/writing-your-own-components. I have followed highlighted because i must have missed something.

in the documentation I found this section:

and in the link for useRecord(), there is a readme file, which i followed:

Here is my component:

I had to change the imports as they threw errors with the ones in the readme.

The issue I am having, is showing this component seems to cause an infinite loop of re-rendering.

And obv this locks up the browser and explodes everything.

Bug prevalence

Always

AdminJS dependencies version

What browsers do you see the problem on?

No response

Relevant log output

No response

Relevant code that's giving you issues

No response

[dziraf]

The issue I am having, is showing this component seems to cause an infinite loop of re-rendering.

Try importing CleanPropertyComponent from adminjs instead of BasePropertyComponent. CleanPropertyComponent strips your custom component part from property to prevent the infinite loop.

https://github.com/SoftwareBrothers/adminjs/blob/master/src/frontend/components/property-type/clean-property-component.tsx

[mattrochon]

Thanks!!

[mattrochon]

I see that this wont work either.

BaseProperty doesnt pass the props into the component.

[dziraf]

Is that from core or is that your custom component? The props from config should be in property as property.props.

[mattrochon]

I guess I'm having trouble tracing through.

When i render my component it starts the following chain:

1. BasePropertyComponent sees my property has a 'components' setting and pulls the component from UserComponents, it then renders that.
2. My component renders a CLeanPropertyComponent, which renders a BasePropertyComponent, which sees that it is a type='password' and renders the default property for this.
3. Here is where I'm not quite sure where it goes

I added the prop to my property definition:

but it never seems to get rendered to the html.

I could solve that by just making my own html, but then I would lose alot of hte power that BPC provides, no?

[dziraf]

Could you try autoComplete instead of autocomplete? Can you also share the code of your custom component as it is currently

Sorry, I'll only be able to look at it tomorrow.

I could solve that by just making my own html, but then I would lose alot of hte power that BPC provides, no? Actually, you can just copy the source code of the default password component and modify it. You'll most likely just have to fix the imports and it should work exactly the same. https://github.com/SoftwareBrothers/adminjs/blob/master/src/frontend/components/property-type/password/edit.tsx

[mattrochon]

autoComplete seems to have worked