Nuxt•4mo ago

UModal There are no focusable elements inside the <FocusTrap />

I recently start using nuxt and i'm trying to open a UModal. With my current code, the modal open sometimes. (when it doesn't, shows the message There are no focusable elements inside the <FocusTrap />). here's the gist with the file where i called the modal and the modal file itself: https://gist.github.com/JonatasBSM/f9fc4ae0b36eaca683690ebd951c052c

Gist

UModal There are no focusable elements inside the

UModal There are no focusable elements inside the - documentacao.vue

22 Replies

JonatasBrazOP•4mo ago

btw, the examples from nuxt documentation are returning the same result

Cue•4mo ago

Which examples?

JonatasBrazOP•4mo ago

this one, for example

Cue•4mo ago

That's expected for the example. There are no focusable elements in the modal. Btw, I cannot reproduce, but I can with the TipoDocumento modal only because I'm removing all focusable elements. https://stackblitz.com/edit/github-virsxm?file=app.vue

JonatasBrazOP•4mo ago

are inputs focusable elements?

Cue•4mo ago

Yes. But all your modals have a button (the close modal button) so technically your modals do have a focusable element

JonatasBrazOP•4mo ago

i didnt get it. I shouldnt receive this error, right?

Cue•4mo ago

No, you shouldn't. But I can't reproduce with the code you've provided, so perhaps something else is happening?

JonatasBrazOP•4mo ago

can i share with you my github repository? i dont know how to create an example

Cue•4mo ago

Sure

JonatasBrazOP•4mo ago

https://github.com/JonatasBSM/geFrontEnd

GitHub

GitHub - JonatasBSM/geFrontEnd

Contribute to JonatasBSM/geFrontEnd development by creating an account on GitHub.

JonatasBrazOP•4mo ago

i think you just need to do a npm install the endpoint for this page is configuracoes/documentos

Cue•4mo ago

Can't reproduce the focus warning from the github repo you've provided either. Might want to remove <body> here too https://github.com/JonatasBSM/geFrontEnd/blob/master/layouts/desktop/dashboard.vue#L23 - a document can only have one body.

JonatasBrazOP•4mo ago

thanks for the body advise! The modals opened normally to you? Nothing about open one time, dont open next time? maybe i need to update my packages? btw, i just tested on firefox and worked normally. probably is my chrome version

Cue•4mo ago

Possibly. There's a lot of muddling of concepts, but I guess that's going to be part of your learning journey. For example, maybe avoid assigning a ref to the modal, and use v-model instead, etc.

JonatasBrazOP•4mo ago

i see i'll take your tips with me in this journey you're very kind we'll probably talk again soon thank you!

Cue•4mo ago

Any time!

JonatasBrazOP•4mo ago

Hey! About using v-model instead of ref, it would be a prop on child component?

Cue•4mo ago

Kind of. There’s a shorthand way of doing it by using defineModel But essentially it’s prop & emit

JonatasBrazOP•4mo ago

Parent:

const modalState = ref(false);

function open_logout_modal() {
  modalState.value = true;
}


<logout v-model="modalState" />

const modalState = ref(false);

function open_logout_modal() {
  modalState.value = true;
}


<logout v-model="modalState" />

Child:

<UModal v-model="modalState" title="Logout" @close="flOppened = false">


const modalState = ref(false);

function open_logout_modal() {
  modalState.value = true;
}

<UModal v-model="modalState" title="Logout" @close="flOppened = false">


const modalState = ref(false);

function open_logout_modal() {
  modalState.value = true;
}

like this? thatś really clean

Cue•4mo ago

Essentially yes, but don’t forget to use defineModel in the child, since that is the state being received from the parent. https://vuejs.org/guide/components/v-model.html

Vue.js

Vue.js - The Progressive JavaScript Framework

JonatasBrazOP•4mo ago

I used it! Just forgot to show you 🤣. That's really cool

Gaming

Programming

UModal There are no focusable elements inside the <FocusTrap />