How to display <FormKitSummary> in a modal?

[AloisSeckar]

I am trying to customize <FormKitSummary> and display it inside a modal with default slot.

I tried to follow the hint in the docs, that is providing the form’s core node as the node prop, but I am failing to see anything inside my modal. The bare summary on the form level works fine. The modal window appears, but with no content. What's the catch❓

Template:

<FormKit ref="formToSubmit" type="form" @submit="handleSubmit()" @submit-invalid="handleInvalid()">
  <!-- this shows validation summary as expected -->
  <FormKitSummary />
  <MyModalWindow caption="Chyba" :visible="visible" @close="visible = false">
    <div>This is displayed fine</div>
    <!-- formkit-summary div is included, but empty -->
    <FormKitSummary :node="node" />
  </MyModalWindow>
</FormKit>

Script setup:

const formToSubmit = ref(null)
const node = computed(() => formToSubmit.value?.node)
const visible = ref(false)
function handleInvalid () {
  console.log('invalid')
  visible.value = true
}
function handleSubmit () {
  console.log('submitting')
}

[AloisSeckar]

Alternative question: Can I access the contents of validation summary programatically somewhere on my formToSubmit template ref?

EDIT: nvm, I got this

node.value?.walk(
  child => console.log(child.context.messages)
)

So I think I am able to do it myself, in case I cannot use the <FormKitSummary> component.

[fenilli]

I would guess if MyModalWindow was already open ( always open ) it would work, probably due to it being closed "aka outside of dom" whenever you open the modal it didn't run the events necessary to get the messages.

[AloisSeckar]

Hm. I am wrapping my modal window around https://ui.nuxt.com/components/modal - I am not quite sure how they handle the visibility under the hood.

Any way to "force" getting messages programatically upon showing the window?

But meanwhile I spend half of my workday to dig the messages manually from the FormKit's node, so now I have working solution based on that. I am only curious if this would be possble.

[fenilli]

Yes they remove it from the dom on hide/show, I would say you might have some luck with a :key with the same value as the :visible so you might try <FormKitSummary :key="visible".