ListItem not working

[manchuwook]

Hello,
I have some pretty elaborate schemas and want to be able to add sub-items, but it either renders the section as a Card with no options to add elements (bootstrap 5), has a button but it does nothing (MUI 5), or just has a '+' sign that is text.

Do I need something in the App.tsx/RootComponent?

I have also experimented with tying in a model to the Component with model={sampleModel} and it does add the ListItem, however, clicking the + button still doesn't append a new item. Is there a way to add an event listener or some kind of debugging to see if there is an error thrown?

[radekmie]

Hey @manchuwook! There are a couple of things here, so let me answer them one by one:

1. Bootstrap 5 theme seems to have a bug, and the ListAddField renders a white icon on a white background. I'm 100% sure it wasn't the case before, and maybe it changed in some alpha version (we're still on alpha 3). A quick fix is adding a background or text color to the badge rounded-pill float-end in there.
2. I wasn't able to reproduce the problem of "+" icon not doing anything using MUI or any other theme. Can you try it on our CodeSandbox template?
3. Using model on the form lets you control it from the outside. AutoForm manages its state by itself, but you can manage it anyway; other forms require state management from you (i.e., both onChange and model have to be used). Here I'd also need a reproduction, as it is working as expected.

(I also let myself update your first post instead of citing it in the answer.)

[manchuwook]

Well... I tried switching over to SemanticUI just to fiddle about and it appears to work in Storybook when I test the component now. But when I move it out to the App.tsx, it behaves poorly again.

[manchuwook]

Also, just directly editing the element in chrome doesn't seem to change the icon color no matter how I try. I did notice that it is using OctIcon, but their docs are a bit wanting on this topic.

[manchuwook]

<div id="uniforms-0000-000x" class="badge rounded-pill float-end" role="button" tabindex="0" style="
    height: 100px;
    width: 100px;
    background-color: orange;
"><i class="octicon octicon-plus" style="
    height: 100px;
    width: 100px;
    /* background-color: purple; */
    color: purple;
"></i></div>

[manchuwook]

Mind, this is me giving bootstrap 5 another go.

[radekmie]

I just checked again and setting up the background-color worked for me. I'll file an issue regarding the default configuration now (forgot to do it the last time).

[manchuwook]

I'm still not able to get new list items to add, but I did notice something about StrictMode which I recently disabled. Now I am getting something about unable to get length, but that may have to do with the model not having an array defined. That may have to do with the following:

  Warning: Failed prop type: Invalid prop `required` of type `array` supplied to `ForwardRef(FormControl)`, expected `boolean`.

[radekmie]

StrictMode compatibility is tracked in #1194.

[manchuwook]

Here is my reproduction of the issue: https://rli-sage-player-api-demo-v1.pages.dev/page-2

[manchuwook]

After much tinkering, it had to do with several problems with my setup

1. StrictMode - don't use it
2. additionalProperties - don't use it in your schema designs. It messes with polymorphism
3. pass a model on initialization in your app.tsx - even if it is a dumb empty one. Storybook seems to do that as a habit.