Content is not updated when creating a model

[Qsppl]

example: https://stackblitz.com/edit/hybrids-store-ui-form-example-kbktry?file=src%2Findex.js,src%2Fcomponent.js,src%2Fmodel.js

[smalluban]

It might be a not very well-documented feature (it is still in docs) -

Here you have a slightly simplified version of your example (I think you don't need a bunch of logic in my-model and store definition) - https://stackblitz.com/edit/hybrids-store-ui-form-example-71ugrh?file=src%2Findex.js,src%2Fcomponent.js,src%2Fmodel.js%3AL22

Essentially, you must add loose: true to your [store.connect] definition, as the docs say:

By default, it is set to false, so updating model instances will not change items’ order or placement in the array. The typical use case to turn it on is when you have a paginated list, and updating or creating a model instance might affect the order or content of the list.

https://hybrids.js.org/#/store/storage?id=loose

For the "memory-based" models (without the definition) this option is true. It would be a breaking change to switch it to true for custom storage, but I would re-think it. The case for setting it to false is that, otherwise, any change to any instance of the model will invalidate every list call - it might cause a cascade of fetches for pages of data. You can still control that then manually by calling store.clear(listModelInstance).

[Qsppl]

Thank you, I will clear the cache when adding/removing a model.

This solution works:

async function submit(host, event) {
  event.preventDefault();

  await store.submit(host.draft);
  // clear cache for enumerable descriptors by this store
  store.clear([Model]);

  if (!host.model) {
    host.draft = null;
  } else {
    host.editMode = false;
  }
}