Adding component with inner placeholder breaks placeholder settings

Question

I have component

manifest.addComponent({
  name: 'MyComponentWithPlaceholder',
  icon: SitecoreIcon.DocumentTag,
  fields: [
    { name: 'heading', type: CommonFieldTypes.SingleLineText },
  ],
  placeholders: ['my-placeholder']
});

with implementation

const MyComponentWithPlaceholder = (props) => (
  <div>
    <p>My component with <strong>Placeholder</strong></p>
    <Text field={props.fields.heading} />
    <Placeholder name='my-placeholder' rendering={props.rendering} />
  </div>
);

and my-placeholder field Allowed Controls filled with some components...

But, when I'm trying to add this component to layout in experience editor, inner placeholder my-placeholder is behaving like it did not contain any allowed controls.

However, after saving state of layout (in experience editor), my-placeholder let me correctly select component, that I'm allowed to add to parent component.

What I'm doing wrong? I don't want to save layout state after every added component.

Answer 1

You are not doing anything wrong. This is a known issue (documented in the Help Page of JSS Docs), and unfortunately it causes a lot of confusion for those encountering it for the first time.

Saving the page to resolve the issue is the current recommended workaround.