ionic-team / ionic-team/ionic-framework

bug: modal should not add another ion-page class if one is already provided by the user

Abierto
#23,304 9 comentarios 1 reacción 0 asignados Ver en GitHub
package: core type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

# Feature Request

**Ionic version:**

[x] **5.x**

**Describe the Feature Request**
When using modalController and passing a custom component, the ion-modal that the modalController creates automatically has an ion-page element inside of it. If the custom component uses ion-page as its root element, there are two ion-page elements inside of the modal.

This default behavior is bad for a couple of reasons:
1. Vue components that are used inside of modals may end up being reused as regular content pages. There are plenty of cases where this happens in our app. So either we leave `` as the parent in these components and you end up having two `` elements embedded when the component is used as a modal, or we write some hacky logic to determine whether or not the component has been placed inside of a modal and remove the ion-page parent when so.
2. Not all use cases of ion-modal will see ion-page as the root parent inside the modal. For example, you may need routing inside of a modal in which case ion-nav should be the immediate child of the ion-modal and ion-page will be inside of the ion-nav.

**Describe Preferred Solution**
Either remove the ion-page automatically generated inside of ion-modal completely and let the custom component decide when and where to place the page, or only add ion-page if the root element of the custom component isn't already an ion-page or ion-nav.

**Reproduction**
https://github.com/Giwayume/ion-vue-modal-page-bug

**Related Code**

some-component.vue
```


Hello World

```

modal-creator.ts
```
import { defineAsyncComponent } from 'vue';
import { modalController } from '@ionic/vue';
const modal = await modalController.create({
component: defineAsyncComponent(() => import('./some-component.vue'))
});
```

When this modal is created, it will have this markup:
```


```

Instead, it should have this markup:
```


```

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Start with the reproduction repository and the modal-creator.ts and some-component.vue examples to verify the duplicate ion-page structure. Trace Ionic Vue's modal rendering and determine whether the generated page should be omitted for an ion-page or ion-nav root; done means the modal matches the requested single-page markup without breaking other modal uses.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.