The named slot with dialog toolbar items works with Vue2, but it doesn't with Vue3

[tesicg]

We used in our app Vue2 with DevExtreme components, and decided to migrate to Vue3. The code looks as following:

1) Vue2

v-modal-dialog.vue (base component):

<template>
  <DxPopup
    v-bind="$attrs"
    :hide-on-outside-click="true"
    :drag-enabled="true"
    :wrapper-attr="popupAttributes"
    position="center"
    v-on="$listeners"
    @hiding="onHiding"
  >
    <template v-for="(_, slot) in $scopedSlots" #[slot]="props">
      <slot :name="slot" v-bind="props" />
    </template>

    <slot />
    <slot name="footer">
      <DxToolbarItem
        template="save-button"
        toolbar="bottom"
        location="after"
        :disabled="isSaveDisabled"
      />
      <DxToolbarItem
        template="cancel-button"
        toolbar="bottom"
        location="after"
      />
      <!-- <button type="button">BUTTON 1</button>
      DEFAULT FOOTER -->
    </slot>

    <template #save-button>
      <v-button class="save-btn-default" :text="okText" @click="onOkClick" />
    </template>
    <template #cancel-button>
      <v-button
        class="cancel-btn-default"
        :text="cancelText"
        @click="onCancelClick"
      />
    </template>
  </DxPopup>
</template>

<script>
import VButton from "@/components/simple/v-button.vue";
import { DxPopup, DxToolbarItem } from "devextreme-vue/popup";

export default {
  inheritAttrs: false,
  ...
}

v-app-types-modal.vue (extended component from base component through named slots):

<template>
  <v-modal-dialog
    :visible="isModalVisible"
    title="CONNECTION"
    okText="Save"
    cancelText="Cancel"
    :isSaveDisabled="isDisabled"
    :width="550"
    :height="780"
    @ok="onOk"
    @cancel="onCancel"
    @hiding="onHiding"
  >
    <DxForm
      :form-data="selectedItem"
      label-mode="static"
      validation-group="selectedData"
      :scrollingEnabled="isScrollingEnabled"
    >
      <DxItem template="type" :is-required="true" />
      <template #type>
        <v-latin-letters-and-digits-text-box
          v-bind:value="selectedItem.type"
          v-on:update:value="($event) => {selectedItem.type = $event}"
          label="Type"
          label-mode="static"
        >
          <DxValidator validation-group="selectedData">
            <DxRequiredRule message="Required field: Type." />
          </DxValidator>
        </v-latin-letters-and-digits-text-box>
      </template>
  ...

  </v-modal-dialog>
</template>

The key parts of package.json look as following:

    "vue": "^2.6.11"
    "vue-loader": "^15.10.1",
    "vue-template-compiler": "^2.6.11"

The dialog looks as following:

As you can see there are 2 buttons (DevExtreme's DxToolbarItem component) displayed from base component as default content of named slot.

2) Vue3

The comnponents' code is the same, except for v-on="$listeners", which is not needed in Vue3 and this block of code:

<template v-for="(_, slot) in $slots" #[slot]="props">
  <slot :name="slot" v-bind="props || {}" />
</template>

The key parts of package.json look as following:

    "vue": "^3.2.31"
    "vue-loader": "^17.0.1"
    "@vue/compiler-sfc": "^3.2.47"

The dialog looks as following:

As you can see there are NOT 2 buttons from base component as default content of named slot.

The interesting thing is when I uncomment this block of code:

<!-- <button type="button">BUTTON 1</button>
DEFAULT FOOTER -->

It's displayed on dialog, but NOT on the right place.

I've tried a lot of things to make it work, but no luck.

What's the issue and could I fix it?

[edison1105]

Could you provide a runnable demo with sfc-playground ?

[tesicg]

The issue is partially resolved by upgrading DevExtreme's version from 21.2.6 to 22.2.5.

I could see the four template names "ok-template", "close-template", "yes-template", and "no-template" on dialog now, but there are no buttons with text.

You can take a look at it at this link: https://codesandbox.io/s/overview-devextreme-popup-forked-o579wq